diff --git a/package.json b/package.json index d4e3241..e7b47e1 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "type-check": "tsc -p tsconfig.json --noEmit", "test": "vitest", "test:run": "vitest run", - "test:coverage": "vitest run --coverage" + "test:coverage": "vitest run --coverage", + "css:audit": "node scripts/css-audit.mjs" }, "dependencies": { "@ant-design/icons": "5.3.0", diff --git a/scripts/css-audit.mjs b/scripts/css-audit.mjs new file mode 100644 index 0000000..20ff14c --- /dev/null +++ b/scripts/css-audit.mjs @@ -0,0 +1,87 @@ +// CSS 健康度审计脚本。 +// 用法: npm run css:audit +// 输出每个 CSS 文件的行数、选择器数、!important 数、@media 数， +// 以及 !important 密度（每 100 行的 !important 数）。 +// 用于建立基线、跟踪 CSS 瘦身进度、防止 !important 回潮。 + +import { readFileSync, readdirSync, statSync } from "node:fs"; +import { fileURLToPath } from "node:url"; +import { dirname, join, relative } from "node:path"; + +const ROOT = join(dirname(fileURLToPath(import.meta.url)), "..", "src", "styles"); +const REPORT = []; + +function scanCssFile(filePath) { + const content = readFileSync(filePath, "utf-8"); + const lines = content.split(/\r?\n/).length; + const selectors = (content.match(/\{/g) || []).length; + const important = (content.match(/!important/g) || []).length; + const media = (content.match(/@media/g) || []).length; + const density = lines > 0 ? ((important / lines) * 100).toFixed(1) : "0"; + return { lines, selectors, important, media, density }; +} + +function walk(dir) { + for (const entry of readdirSync(dir)) { + const full = join(dir, entry); + const st = statSync(full); + if (st.isDirectory()) { + walk(full); + } else if (entry.endsWith(".css")) { + const rel = relative(ROOT, full).replace(/\\/g, "/"); + REPORT.push({ file: rel, ...scanCssFile(full) }); + } + } +} + +walk(ROOT); + +// Sort by !important count descending to surface the worst offenders. +REPORT.sort((a, b) => b.important - a.important); + +const totals = REPORT.reduce( + (acc, r) => { + acc.lines += r.lines; + acc.selectors += r.selectors; + acc.important += r.important; + acc.media += r.media; + return acc; + }, + { lines: 0, selectors: 0, important: 0, media: 0 }, +); + +const pad = (s, n) => String(s).padEnd(n); +const num = (s, n) => String(s).padStart(n); + +console.log("\nCSS Audit Report — src/styles/\n"); +console.log( + `${pad("File", 52)} ${num("Lines", 7)} ${num("Sel", 6)} ${num("!imp", 7)} ${num("@media", 7)} imp/100ln`, +); +console.log("-".repeat(92)); +for (const r of REPORT) { + console.log( + `${pad(r.file, 52)} ${num(r.lines, 7)} ${num(r.selectors, 6)} ${num(r.important, 7)} ${num(r.media, 7)} ${r.density}`, + ); +} +console.log("-".repeat(92)); +console.log( + `${pad("TOTAL", 52)} ${num(totals.lines, 7)} ${num(totals.selectors, 6)} ${num(totals.important, 7)} ${num(totals.media, 7)} ${((totals.important / totals.lines) * 100).toFixed(1)}`, +); +console.log(""); + +// Exit non-zero if total !important exceeds a budget threshold. +// Current baseline: ~7795. Set budget slightly above to allow incremental work +// while preventing uncontrolled growth. +const IMPORTANT_BUDGET = 7820; +if (totals.important > IMPORTANT_BUDGET) { + console.error( + `FAIL: !important count ${totals.important} exceeds budget ${IMPORTANT_BUDGET}. ` + + `Run with --no-important-check to bypass (not recommended).`, + ); + process.exit(1); +} else { + console.log( + `OK: !important count ${totals.important} within budget ${IMPORTANT_BUDGET} ` + + `(headroom ${IMPORTANT_BUDGET - totals.important}).`, + ); +} diff --git a/src/features/ecommerce/EcommerceVideoWorkspace.tsx b/src/features/ecommerce/EcommerceVideoWorkspace.tsx index 1174943..bb4b914 100644 --- a/src/features/ecommerce/EcommerceVideoWorkspace.tsx +++ b/src/features/ecommerce/EcommerceVideoWorkspace.tsx @@ -1,4 +1,4 @@ -import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from "react"; import "../../styles/pages/ecommerce-video.css"; import { CloseOutlined, @@ -13,13 +13,10 @@ import { } from "@ant-design/icons"; import { runVideoPlan, - renderSceneImage, - renderScene, buildSceneTasks, saveVideoHistory, buildComplianceFailureMessage, } from "./ecommerceVideoService"; -import { waitForTask } from "../../api/taskSubscription"; import { PLAN_STEP_LABELS, PLAN_STEPS_DISPLAY, @@ -30,7 +27,6 @@ import { type PlanStep, } from "./ecommerceVideoTypes"; import type { AdVideoUserConfig } from "../../api/adVideoPlanClient"; -import { ServerRequestError } from "../../api/serverConnection"; import { saveToolResultToLocal, addToolResultToAssetLibrary } from "../workbench/toolResultActions"; import { useAppStore } from "../../stores"; import { useGenerationTasks } from "../../hooks/useGenerationTasks"; @@ -40,6 +36,7 @@ import { clearEcommerceVideoState, } from "./ecommerceVideoKeepalive"; import { saveUnifiedEcommerceGenerationRecord } from "./ecommerceGenerationPersistence"; +import { useVideoSceneRunner } from "./useVideoSceneRunner"; interface EcommerceVideoWorkspaceProps { isAuthenticated: boolean; @@ -138,8 +135,6 @@ export default function EcommerceVideoWorkspace({ const [actionNotice, setActionNotice] = useState(null); const [previewMedia, setPreviewMedia] = useState<{ url: string; type: "image" | "video" } | null>(null); const [flowZoom, setFlowZoom] = useState(1); - const abortControllerRef = useRef(null); - const renderAbortRef = useRef({ current: false }); const actionNoticeTimerRef = useRef(null); const setView = useAppStore((s) => s.setView); const keepaliveRestoredFingerprintRef = useRef(null); @@ -151,6 +146,28 @@ export default function EcommerceVideoWorkspace({ [productImageDataUrls, requirement, platform, aspectRatio, durationSeconds, resolution], ); + const { + abortControllerRef, + renderAbortRef, + runImagePhase, + runVideoPhase, + resumePolling, + cancel, + retryScene, + } = useVideoSceneRunner({ + inputFingerprint, + planResult, + completedSteps, + sourceImageUrls, + aspectRatio, + resolution, + generation: generation as unknown as Parameters[0]["generation"], + sceneStoreIdMap, + onScenesChange: setScenes, + onStageChange: setStage, + onError: setError, + }); + // ── Keep-alive: restore saved state on mount ───────────── useEffect(() => { if (keepaliveRestoredFingerprintRef.current === inputFingerprint) return; @@ -181,11 +198,11 @@ export default function EcommerceVideoWorkspace({ setError(buildComplianceFailureMessage(planResult.compliance)); return; } - const timer = setTimeout(() => { void handleGenerateImages(); }, delay); + const timer = setTimeout(() => { void runImagePhase(scenes); }, delay); return () => clearTimeout(timer); } if (stage === "imaged" && scenes.every((s) => s.imageUrl)) { - const timer = setTimeout(() => { void handleRenderVideos(); }, delay); + const timer = setTimeout(() => { void runVideoPhase(scenes); }, delay); return () => clearTimeout(timer); } }, [stage, scenes, planResult]); @@ -302,80 +319,11 @@ export default function EcommerceVideoWorkspace({ useEffect(() => { if (keepalivePollingStartedRef.current) return; if (!scenes.length || stage === "idle" || stage === "cancelled" || stage === "completed") return; - const hasRunningScenes = scenes.some((s) => s.status === "running" || s.status === "pending"); if (!hasRunningScenes) return; keepalivePollingStartedRef.current = true; - - // Resume polling for image generation tasks - if (stage === "imaging") { - renderAbortRef.current = { current: false }; - void (async () => { - for (const scene of scenes) { - if (renderAbortRef.current.current) break; - if (scene.status !== "running" && scene.status !== "pending") continue; - if (!scene.imageTaskId) continue; - try { - const resultUrl = await waitForTask(scene.imageTaskId, { - abortRef: renderAbortRef.current, - onProgress: (e) => - setScenes((prev) => prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, progress: e.progress } : s))), - }); - if (resultUrl) { - setScenes((prev) => - prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, status: "idle", progress: 100, imageUrl: resultUrl } : s)), - ); - } - } catch { - setScenes((prev) => - prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, status: "idle", error: "恢复任务失败" } : s)), - ); - } - } - setScenes((current) => { - const allImaged = current.every((s) => s.imageUrl); - if (allImaged) setStage("imaged"); - return current; - }); - })(); - } - - // Resume polling for video rendering tasks - if (stage === "rendering") { - renderAbortRef.current = { current: false }; - void (async () => { - for (const scene of scenes) { - if (renderAbortRef.current.current) break; - if (scene.status !== "running" && scene.status !== "pending") continue; - if (!scene.taskId) continue; - try { - const resultUrl = await waitForTask(scene.taskId, { - abortRef: renderAbortRef.current, - onProgress: (e) => - setScenes((prev) => prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, progress: e.progress } : s))), - }); - if (resultUrl) { - setScenes((prev) => - prev.map((s) => - s.sceneId === scene.sceneId ? { ...s, status: "completed", progress: 100, resultUrl: resultUrl } : s, - ), - ); - } - } catch { - setScenes((prev) => - prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, status: "failed", error: "恢复任务失败" } : s)), - ); - } - } - setScenes((current) => { - const hasFailed = current.some((s) => s.status === "failed"); - const allDone = current.every((s) => s.status === "completed" || s.status === "failed"); - if (allDone) setStage(hasFailed ? "partial_failed" : "completed"); - return current; - }); - })(); - } - }, [scenes, stage]); + void resumePolling(stage, scenes); + }, [scenes, stage, resumePolling]); // Note: keep-alive is NOT cleared on completion — results persist across page switches. // Only cleared when user explicitly starts a new plan via handlePlan. @@ -558,157 +506,9 @@ export default function EcommerceVideoWorkspace({ await runPlanFlow(planProgress); }; - // ── Phase 2: Image generation per scene ────────────────────── - const handleGenerateImages = async () => { - if (!planResult || !scenes.length) return; - if (!planAllowsVideoGeneration(planResult)) { - setError(buildComplianceFailureMessage(planResult.compliance)); - return; - } - setStage("imaging"); setError(null); - renderAbortRef.current = { current: false }; - const ratio = aspectRatio.includes("9:16") || aspectRatio.includes("9：16") ? "9:16" - : aspectRatio.includes("16:9") || aspectRatio.includes("16：9") ? "16:9" - : "1:1"; - let currentScenes = [...scenes]; - const persistScenes = (next: EcommerceVideoSceneTask[]) => { - currentScenes = next; - setScenes(next); - saveEcommerceVideoState({ inputFingerprint, stage: "imaging", completedSteps, planResult, scenes: next, sourceImageUrls }); - }; - // Only redo scenes missing imageUrl — preserves successfully generated images on partial retry - const scenesToProcess = currentScenes.filter((s) => !s.imageUrl); - if (!scenesToProcess.length) { - setStage("imaged"); - saveEcommerceVideoState({ inputFingerprint, stage: "imaged", completedSteps, planResult, scenes: currentScenes, sourceImageUrls }); - return; - } - for (const scene of scenesToProcess) { - if (renderAbortRef.current.current) break; - persistScenes(currentScenes.map((s) => s.sceneId === scene.sceneId ? { ...s, status: "pending", error: undefined } : s)); - try { - await renderSceneImage( - { sceneId: scene.sceneId, prompt: scene.prompt, aspectRatio: ratio, productImageUrls: sourceImageUrls }, - { - onSceneImageSubmitted: (id, taskId) => { - persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, imageTaskId: taskId, status: "running" } : s)); - const storeId = generation.submitTask({ title: `分镜${id}图片`, type: "image", status: "running", progress: 0, prompt: scene.prompt, sourceView: "ecommerce", taskId, params: { sceneId: id, phase: "imaging" } }); - sceneStoreIdMap.current.set(id, storeId); - }, - onSceneImageProgress: (id, progress) => persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, progress } : s)), - onSceneImageCompleted: (id, url) => { - persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, status: "idle", progress: 100, imageUrl: url } : s)); - const sid = sceneStoreIdMap.current.get(id); - if (sid) generation.markCompleted(sid, url); - }, - onSceneImageFailed: (id, err2) => { - persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, status: "idle", error: err2 } : s)); - const sid = sceneStoreIdMap.current.get(id); - if (sid) generation.markFailed(sid, err2); - }, - }, - renderAbortRef.current, - ); - } catch (err) { - const message = err instanceof Error ? err.message : "图片生成失败"; - persistScenes(currentScenes.map((s) => s.sceneId === scene.sceneId ? { ...s, status: "idle", error: message } : s)); - } - } - const allHaveImages = currentScenes.every((s) => s.imageUrl); - const finalStage = allHaveImages ? "imaged" as const : "partial_failed" as const; - setStage(finalStage); - saveEcommerceVideoState({ inputFingerprint, stage: finalStage, completedSteps, planResult, scenes: currentScenes, sourceImageUrls }); - }; - // ── Phase 3: Video rendering from generated images ────────── - const handleRenderVideos = async () => { - if (!scenes.length) return; - if (!planAllowsVideoGeneration(planResult)) { - setError(planResult ? buildComplianceFailureMessage(planResult.compliance) : "合规检查未通过，已停止生成。"); - return; - } - if (!scenes.some((s) => s.imageUrl)) { setError("请先生成分镜图片"); return; } - setStage("rendering"); setError(null); - renderAbortRef.current = { current: false }; - const quality = mapResolutionToQuality(resolution); - let currentScenes = [...scenes]; - const persistScenes = (next: EcommerceVideoSceneTask[]) => { - currentScenes = next; - setScenes(next); - saveEcommerceVideoState({ inputFingerprint, stage: "rendering", completedSteps, planResult, scenes: next, sourceImageUrls }); - }; - // Only render scenes that haven't completed yet — preserves successful videos on partial retry - const scenesToProcess = currentScenes.filter((s) => s.imageUrl && s.status !== "completed"); - if (!scenesToProcess.length) { - const finalStage = currentScenes.every((s) => s.status === "completed") ? "completed" as const : "partial_failed" as const; - setStage(finalStage); - saveEcommerceVideoState({ inputFingerprint, stage: finalStage, completedSteps, planResult, scenes: currentScenes, sourceImageUrls }); - return; - } - for (const scene of scenesToProcess) { - if (renderAbortRef.current.current) break; - if (!scene.imageUrl) continue; - persistScenes(currentScenes.map((s) => s.sceneId === scene.sceneId ? { ...s, status: "pending", error: undefined } : s)); - try { - await renderScene( - { sceneId: scene.sceneId, prompt: scene.prompt, durationSeconds: scene.durationSeconds, imageUrl: scene.imageUrl, productImageUrls: sourceImageUrls, aspectRatio, resolution: quality }, - { - onSceneSubmitted: (id, taskId) => { - persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, taskId, status: "running" } : s)); - const storeId = generation.submitTask({ title: `分镜${id}视频`, type: "video", status: "running", progress: 0, prompt: scene.prompt, sourceView: "ecommerce", taskId, params: { sceneId: id, phase: "rendering" } }); - sceneStoreIdMap.current.set(id, storeId); - }, - onSceneProgress: (id, progress) => persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, progress } : s)), - onSceneCompleted: (id, url) => { - persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, status: "completed", progress: 100, resultUrl: url } : s)); - const sid = sceneStoreIdMap.current.get(id); - if (sid) generation.markCompleted(sid, url); - }, - onSceneFailed: (id, err2) => { - persistScenes(currentScenes.map((s) => s.sceneId === id ? { ...s, status: "failed", error: err2 } : s)); - const sid = sceneStoreIdMap.current.get(id); - if (sid) generation.markFailed(sid, err2); - }, - }, - renderAbortRef.current, - ); - } catch (err) { - const msg = err instanceof Error ? err.message : "生成失败"; - const isPayment = err instanceof ServerRequestError && err.status === 402; - persistScenes(currentScenes.map((s) => s.sceneId === scene.sceneId ? { ...s, status: "failed", error: isPayment ? "余额不足，请充值后继续" : msg } : s)); - if (isPayment) { setError("余额不足，请充值后再生成视频"); renderAbortRef.current.current = true; break; } - } - } - const hasFailed = currentScenes.some((s) => s.status === "failed"); - const allDone = currentScenes.every((s) => s.status === "completed" || s.status === "failed"); - const finalStage = allDone ? (hasFailed ? "partial_failed" as const : "completed" as const) : "rendering" as const; - setScenes(currentScenes); - setStage(finalStage); - saveEcommerceVideoState({ inputFingerprint, stage: finalStage, completedSteps, planResult, scenes: currentScenes, sourceImageUrls }); - }; - - const handleCancel = () => { abortControllerRef.current?.abort(); renderAbortRef.current.current = true; setStage("cancelled"); }; - - const handleRetryScene = async (scene: EcommerceVideoSceneTask) => { - if (!scene.imageUrl) return; - setScenes((prev) => prev.map((s) => s.sceneId === scene.sceneId ? { ...s, status: "pending", error: undefined } : s)); - try { - await renderScene( - { sceneId: scene.sceneId, prompt: scene.prompt, durationSeconds: scene.durationSeconds, imageUrl: scene.imageUrl!, productImageUrls: sourceImageUrls, aspectRatio, resolution: mapResolutionToQuality(resolution) }, - { - onSceneSubmitted: (id, taskId) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, taskId, status: "running" } : s)), - onSceneProgress: (id, progress) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, progress } : s)), - onSceneCompleted: (id, url) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, status: "completed", progress: 100, resultUrl: url } : s)), - onSceneFailed: (id, err2) => setScenes((prev) => prev.map((s) => s.sceneId === id ? { ...s, status: "failed", error: err2 } : s)), - }, - renderAbortRef.current, - ); - } catch (err) { - setScenes((prev) => prev.map((s) => s.sceneId === scene.sceneId ? { ...s, status: "failed", error: (err as Error).message } : s)); - } - }; // ── Derived state ─────────────────────────────────────────── @@ -758,13 +558,13 @@ export default function EcommerceVideoWorkspace({ ) : null} {stage === "planned" || stage === "imaged" ? ( ) : null} {stage === "imaged" || (stage === "partial_failed" && imagedScenes.length > 0) ? ( ) : null} @@ -778,7 +578,7 @@ export default function EcommerceVideoWorkspace({ 生成视频中 ) : null} {stage === "planning" || stage === "imaging" || stage === "rendering" ? ( - ) : null} @@ -867,7 +667,7 @@ export default function EcommerceVideoWorkspace({ 分镜视频{scene.sceneId} {vidFailed ? ( diff --git a/src/features/ecommerce/useVideoSceneRunner.ts b/src/features/ecommerce/useVideoSceneRunner.ts new file mode 100644 index 0000000..0f4b6ba --- /dev/null +++ b/src/features/ecommerce/useVideoSceneRunner.ts @@ -0,0 +1,480 @@ +// 视频场景任务编排 hook。 +// 从 EcommerceVideoWorkspace.tsx 抽出，封装"分镜图片生成 / 视频渲染 / 恢复轮询 / 取消" +// 四类场景任务的执行逻辑，消除组件内 persistScenes 闭包的重复。 +// +// 运行时行为与原组件逻辑等价（setScenes/setStage/saveEcommerceVideoState 的调用顺序和参数不变）； +// 抽离目的是建立逻辑边界，让 resume 与正常执行共享同一套遍历。 + +import { useCallback, useRef } from "react"; +import type { MutableRefObject } from "react"; +import { + renderSceneImage, + renderScene, +} from "./ecommerceVideoService"; +import { waitForTask } from "../../api/taskSubscription"; +import { ServerRequestError } from "../../api/serverConnection"; +import { ENTERPRISE_DEFAULT_VIDEO_MODEL } from "../../utils/enterpriseVideoPolicy"; +import { resolveVideoRequestModel } from "../../utils/resolveVideoModel"; +import { + saveEcommerceVideoState, +} from "./ecommerceVideoKeepalive"; +import type { + EcommerceVideoSceneTask, + EcommerceVideoStage, + EcommerceVideoPlanResult, + PlanStep, +} from "./ecommerceVideoTypes"; + +type SetStateAction = T | ((prev: T) => T); + +export interface VideoSceneRunnerContext { + inputFingerprint: string; + planResult: EcommerceVideoPlanResult | null; + completedSteps: PlanStep[]; + sourceImageUrls: string[]; + aspectRatio: string; + resolution: string; + /** useGenerationTasks 实例，用于 submitTask/markCompleted/markFailed */ + generation: { + submitTask: (task: Record & { taskId: string }) => string; + markCompleted: (id: string, resultUrl?: string) => void; + markFailed: (id: string, error?: string) => void; + }; + sceneStoreIdMap: MutableRefObject>; + onScenesChange: (updater: SetStateAction) => void; + onStageChange: (stage: EcommerceVideoStage) => void; + onError?: (message: string) => void; +} + +function mapResolutionToQuality(res: string): "720P" | "1080P" { + return res.includes("720") ? "720P" : "1080P"; +} + +function deriveAspectRatioToken(aspectRatio: string): string { + if (aspectRatio.includes("9:16") || aspectRatio.includes("9：16")) return "9:16"; + if (aspectRatio.includes("16:9") || aspectRatio.includes("16：9")) return "16:9"; + return "1:1"; +} + +export function useVideoSceneRunner(context: VideoSceneRunnerContext) { + const { + inputFingerprint, + planResult, + completedSteps, + sourceImageUrls, + aspectRatio, + resolution, + generation, + sceneStoreIdMap, + onScenesChange, + onStageChange, + onError, + } = context; + + const abortControllerRef = useRef(null); + const renderAbortRef = useRef({ current: false }); + + // ── Image phase: generate per-scene images ────────────────── + const runImagePhase = useCallback( + async (scenes: EcommerceVideoSceneTask[]): Promise => { + if (!planResult || !scenes.length) return; + const ratio = deriveAspectRatioToken(aspectRatio); + let currentScenes = [...scenes]; + + const persistScenes = (next: EcommerceVideoSceneTask[]) => { + currentScenes = next; + onScenesChange(next); + saveEcommerceVideoState({ + inputFingerprint, + stage: "imaging", + completedSteps, + planResult, + scenes: next, + sourceImageUrls, + }); + }; + + const scenesToProcess = currentScenes.filter((s) => !s.imageUrl); + if (!scenesToProcess.length) { + onStageChange("imaged"); + saveEcommerceVideoState({ + inputFingerprint, + stage: "imaged", + completedSteps, + planResult, + scenes: currentScenes, + sourceImageUrls, + }); + return; + } + + for (const scene of scenesToProcess) { + if (renderAbortRef.current.current) break; + persistScenes( + currentScenes.map((s) => + s.sceneId === scene.sceneId ? { ...s, status: "pending", error: undefined } : s, + ), + ); + try { + await renderSceneImage( + { + sceneId: scene.sceneId, + prompt: scene.prompt, + aspectRatio: ratio, + productImageUrls: sourceImageUrls, + }, + { + onSceneImageSubmitted: (id, taskId) => { + persistScenes( + currentScenes.map((s) => (s.sceneId === id ? { ...s, imageTaskId: taskId, status: "running" } : s)), + ); + const storeId = generation.submitTask({ + title: `分镜${id}图片`, + type: "image", + status: "running", + progress: 0, + prompt: scene.prompt, + sourceView: "ecommerce", + taskId, + params: { sceneId: id, phase: "imaging" }, + }); + sceneStoreIdMap.current.set(id, storeId); + }, + onSceneImageProgress: (id, progress) => + persistScenes(currentScenes.map((s) => (s.sceneId === id ? { ...s, progress } : s))), + onSceneImageCompleted: (id, url) => { + persistScenes( + currentScenes.map((s) => (s.sceneId === id ? { ...s, status: "idle", progress: 100, imageUrl: url } : s)), + ); + const sid = sceneStoreIdMap.current.get(id); + if (sid) generation.markCompleted(sid, url); + }, + onSceneImageFailed: (id, err2) => { + persistScenes( + currentScenes.map((s) => (s.sceneId === id ? { ...s, status: "idle", error: err2 } : s)), + ); + const sid = sceneStoreIdMap.current.get(id); + if (sid) generation.markFailed(sid, err2); + }, + }, + renderAbortRef.current, + ); + } catch (err) { + const message = err instanceof Error ? err.message : "图片生成失败"; + persistScenes( + currentScenes.map((s) => (s.sceneId === scene.sceneId ? { ...s, status: "idle", error: message } : s)), + ); + } + } + + const allHaveImages = currentScenes.every((s) => s.imageUrl); + const finalStage: EcommerceVideoStage = allHaveImages ? "imaged" : "partial_failed"; + onStageChange(finalStage); + saveEcommerceVideoState({ + inputFingerprint, + stage: finalStage, + completedSteps, + planResult, + scenes: currentScenes, + sourceImageUrls, + }); + }, + [ + planResult, + aspectRatio, + inputFingerprint, + completedSteps, + sourceImageUrls, + generation, + sceneStoreIdMap, + onScenesChange, + onStageChange, + ], + ); + + // ── Video phase: render per-scene videos ──────────────────── + const runVideoPhase = useCallback( + async (scenes: EcommerceVideoSceneTask[]): Promise => { + if (!scenes.length) return; + const quality = mapResolutionToQuality(resolution); + let currentScenes = [...scenes]; + + const persistScenes = (next: EcommerceVideoSceneTask[]) => { + currentScenes = next; + onScenesChange(next); + saveEcommerceVideoState({ + inputFingerprint, + stage: "rendering", + completedSteps, + planResult, + scenes: next, + sourceImageUrls, + }); + }; + + const scenesToProcess = currentScenes.filter((s) => s.imageUrl && s.status !== "completed"); + if (!scenesToProcess.length) { + const finalStage: EcommerceVideoStage = currentScenes.every((s) => s.status === "completed") + ? "completed" + : "partial_failed"; + onStageChange(finalStage); + saveEcommerceVideoState({ + inputFingerprint, + stage: finalStage, + completedSteps, + planResult, + scenes: currentScenes, + sourceImageUrls, + }); + return; + } + + for (const scene of scenesToProcess) { + if (renderAbortRef.current.current) break; + if (!scene.imageUrl) continue; + persistScenes( + currentScenes.map((s) => + s.sceneId === scene.sceneId ? { ...s, status: "pending", error: undefined } : s, + ), + ); + try { + await renderScene( + { + sceneId: scene.sceneId, + prompt: scene.prompt, + durationSeconds: scene.durationSeconds, + imageUrl: scene.imageUrl, + productImageUrls: sourceImageUrls, + aspectRatio, + resolution: quality, + }, + { + onSceneSubmitted: (id, taskId) => { + persistScenes( + currentScenes.map((s) => (s.sceneId === id ? { ...s, taskId, status: "running" } : s)), + ); + const storeId = generation.submitTask({ + title: `分镜${id}视频`, + type: "video", + status: "running", + progress: 0, + prompt: scene.prompt, + sourceView: "ecommerce", + taskId, + params: { sceneId: id, phase: "rendering" }, + }); + sceneStoreIdMap.current.set(id, storeId); + }, + onSceneProgress: (id, progress) => + persistScenes(currentScenes.map((s) => (s.sceneId === id ? { ...s, progress } : s))), + onSceneCompleted: (id, url) => { + persistScenes( + currentScenes.map((s) => + s.sceneId === id ? { ...s, status: "completed", progress: 100, resultUrl: url } : s, + ), + ); + const sid = sceneStoreIdMap.current.get(id); + if (sid) generation.markCompleted(sid, url); + }, + onSceneFailed: (id, err2) => { + persistScenes( + currentScenes.map((s) => (s.sceneId === id ? { ...s, status: "failed", error: err2 } : s)), + ); + const sid = sceneStoreIdMap.current.get(id); + if (sid) generation.markFailed(sid, err2); + }, + }, + renderAbortRef.current, + ); + } catch (err) { + const msg = err instanceof Error ? err.message : "生成失败"; + const isPayment = err instanceof ServerRequestError && err.status === 402; + persistScenes( + currentScenes.map((s) => + s.sceneId === scene.sceneId + ? { ...s, status: "failed", error: isPayment ? "余额不足，请充值后继续" : msg } + : s, + ), + ); + if (isPayment) { + onError?.("余额不足，请充值后再生成视频"); + renderAbortRef.current.current = true; + break; + } + } + } + + const hasFailed = currentScenes.some((s) => s.status === "failed"); + const allDone = currentScenes.every((s) => s.status === "completed" || s.status === "failed"); + const finalStage: EcommerceVideoStage = allDone + ? hasFailed + ? "partial_failed" + : "completed" + : "rendering"; + onScenesChange(currentScenes); + onStageChange(finalStage); + saveEcommerceVideoState({ + inputFingerprint, + stage: finalStage, + completedSteps, + planResult, + scenes: currentScenes, + sourceImageUrls, + }); + }, + [ + resolution, + inputFingerprint, + completedSteps, + planResult, + sourceImageUrls, + aspectRatio, + generation, + sceneStoreIdMap, + onScenesChange, + onStageChange, + onError, + ], + ); + + // ── Resume polling: re-attach waitForTask to running scenes ─ + // Used when the page is restored from keep-alive. Differs from runImagePhase/runVideoPhase + // in that it does NOT create new tasks — it only polls existing imageTaskId/taskId. + const resumePolling = useCallback( + async (stage: EcommerceVideoStage, scenes: EcommerceVideoSceneTask[]): Promise => { + renderAbortRef.current = { current: false }; + + if (stage === "imaging") { + for (const scene of scenes) { + if (renderAbortRef.current.current) break; + if (scene.status !== "running" && scene.status !== "pending") continue; + if (!scene.imageTaskId) continue; + try { + const resultUrl = await waitForTask(scene.imageTaskId, { + abortRef: renderAbortRef.current, + onProgress: (e) => + onScenesChange((prev) => + prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, progress: e.progress } : s)), + ), + }); + if (resultUrl) { + onScenesChange((prev) => + prev.map((s) => + s.sceneId === scene.sceneId ? { ...s, status: "idle", progress: 100, imageUrl: resultUrl } : s, + ), + ); + } + } catch { + onScenesChange((prev) => + prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, status: "idle", error: "恢复任务失败" } : s)), + ); + } + } + onScenesChange((current) => { + const allImaged = current.every((s) => s.imageUrl); + if (allImaged) onStageChange("imaged"); + return current; + }); + } + + if (stage === "rendering") { + for (const scene of scenes) { + if (renderAbortRef.current.current) break; + if (scene.status !== "running" && scene.status !== "pending") continue; + if (!scene.taskId) continue; + try { + const resultUrl = await waitForTask(scene.taskId, { + abortRef: renderAbortRef.current, + onProgress: (e) => + onScenesChange((prev) => + prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, progress: e.progress } : s)), + ), + }); + if (resultUrl) { + onScenesChange((prev) => + prev.map((s) => + s.sceneId === scene.sceneId + ? { ...s, status: "completed", progress: 100, resultUrl: resultUrl } + : s, + ), + ); + } + } catch { + onScenesChange((prev) => + prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, status: "failed", error: "恢复任务失败" } : s)), + ); + } + } + onScenesChange((current) => { + const hasFailed = current.some((s) => s.status === "failed"); + const allDone = current.every((s) => s.status === "completed" || s.status === "failed"); + if (allDone) onStageChange(hasFailed ? "partial_failed" : "completed"); + return current; + }); + } + }, + [onScenesChange, onStageChange], + ); + + // ── Cancel: abort planning + scene rendering ──────────────── + const cancel = useCallback(() => { + abortControllerRef.current?.abort(); + renderAbortRef.current.current = true; + onStageChange("cancelled"); + }, [onStageChange]); + + // ── Retry a single scene's video ──────────────────────────── + const retryScene = useCallback( + async (scene: EcommerceVideoSceneTask): Promise => { + if (!scene.imageUrl) return; + onScenesChange((prev) => + prev.map((s) => (s.sceneId === scene.sceneId ? { ...s, status: "pending", error: undefined } : s)), + ); + try { + await renderScene( + { + sceneId: scene.sceneId, + prompt: scene.prompt, + durationSeconds: scene.durationSeconds, + imageUrl: scene.imageUrl, + productImageUrls: sourceImageUrls, + aspectRatio, + resolution: mapResolutionToQuality(resolution), + }, + { + onSceneSubmitted: (id, taskId) => + onScenesChange((prev) => prev.map((s) => (s.sceneId === id ? { ...s, taskId, status: "running" } : s))), + onSceneProgress: (id, progress) => + onScenesChange((prev) => prev.map((s) => (s.sceneId === id ? { ...s, progress } : s))), + onSceneCompleted: (id, url) => + onScenesChange((prev) => + prev.map((s) => (s.sceneId === id ? { ...s, status: "completed", progress: 100, resultUrl: url } : s)), + ), + onSceneFailed: (id, err2) => + onScenesChange((prev) => + prev.map((s) => (s.sceneId === id ? { ...s, status: "failed", error: err2 } : s)), + ), + }, + renderAbortRef.current, + ); + } catch (err) { + onScenesChange((prev) => + prev.map((s) => + s.sceneId === scene.sceneId ? { ...s, status: "failed", error: (err as Error).message } : s, + ), + ); + } + }, + [sourceImageUrls, aspectRatio, resolution, onScenesChange], + ); + + return { + abortControllerRef, + renderAbortRef, + runImagePhase, + runVideoPhase, + resumePolling, + cancel, + retryScene, + }; +} diff --git a/src/styles/standalone/base.css b/src/styles/standalone/base.css new file mode 100644 index 0000000..e9ecde1 --- /dev/null +++ b/src/styles/standalone/base.css @@ -0,0 +1,10461 @@ +.ecommerce-standalone-body { + overflow: hidden; + background: #0d0f10; +} + +.ecommerce-standalone { + min-height: 100vh; + color: #f7faf8; + background: + radial-gradient(circle at 18% 0%, rgba(34, 197, 94, 0.16), transparent 32rem), + linear-gradient(135deg, #0b0f0d 0%, #111616 42%, #101412 100%); +} + +.ecommerce-standalone__topbar { + position: fixed; + inset: 0 0 auto; + z-index: 80; + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + min-height: 64px; + padding: 10px clamp(16px, 3vw, 32px); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(8, 12, 10, 0.78); + backdrop-filter: blur(18px); +} + +.ecommerce-standalone__brand, +.ecommerce-standalone__account { + display: flex; + align-items: center; + gap: 12px; +} + +.ecommerce-standalone__brand strong { + font-size: 16px; + font-weight: 800; +} + +.ecommerce-standalone__brand span, +.ecommerce-standalone__credits, +.ecommerce-standalone__user { + color: rgba(247, 250, 248, 0.66); + font-size: 13px; +} + +.ecommerce-standalone__account button { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 36px; + padding: 0 13px; + border: 1px solid rgba(255, 255, 255, 0.14); + border-radius: 8px; + color: #f7faf8; + background: rgba(255, 255, 255, 0.08); + cursor: pointer; +} + +.ecommerce-standalone__account button:hover { + border-color: rgba(59, 232, 139, 0.58); + background: rgba(59, 232, 139, 0.14); +} + +.ecommerce-standalone__content { + height: 100vh; + padding-top: 64px; +} + +/* 工作台与个人中心常驻同层，用 hidden 切换以保活生成任务状态。 + wrapper 需要撑满内容区，让内部 .product-clone-page/.local-profile-page 的 height:100% 生效。 */ +.ecommerce-standalone__page { + height: 100%; + min-height: 0; +} + +.ecommerce-standalone__page[hidden] { + display: none !important; +} + +.ecommerce-standalone__content > .error-boundary, +.ecommerce-standalone__content .product-clone-page { + height: 100%; +} + +.ecommerce-standalone__content .page-loading-center { + background: #f8f9fa; +} + +.ecommerce-standalone__content .page-loading-center__text { + color: rgba(16, 32, 44, 0.55); +} + +.ecommerce-standalone__content .page-loading-spinner { + border-color: rgba(16, 115, 204, 0.16); + border-top-color: #1073cc; +} + +.ecommerce-auth-modal { + position: fixed; + inset: 0; + z-index: 200; + display: grid; + place-items: center; + padding: 20px; +} + +.ecommerce-auth-modal__scrim { + position: absolute; + inset: 0; + border: 0; + background: rgba(0, 0, 0, 0.62); +} + +.ecommerce-auth-modal__panel { + position: relative; + z-index: 1; + width: min(420px, 100%); + padding: 24px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + background: rgba(15, 22, 18, 0.96); + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42); +} + +.ecommerce-auth-modal__close { + position: absolute; + top: 12px; + right: 12px; + width: 34px; + height: 34px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + color: #f7faf8; + background: rgba(255, 255, 255, 0.06); + cursor: pointer; +} + +.ecommerce-auth-modal__eyebrow { + color: #52f49f; + font-size: 12px; + font-weight: 800; +} + +.ecommerce-auth-modal h2 { + margin: 8px 0 18px; + font-size: 24px; +} + +.ecommerce-auth-modal label { + display: grid; + gap: 7px; + margin-top: 12px; + color: rgba(247, 250, 248, 0.72); + font-size: 13px; +} + +.ecommerce-auth-modal input { + width: 100%; + min-height: 42px; + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 8px; + padding: 0 12px; + color: #f7faf8; + background: rgba(255, 255, 255, 0.07); + outline: none; +} + +.ecommerce-auth-modal input:focus { + border-color: rgba(59, 232, 139, 0.68); + box-shadow: 0 0 0 3px rgba(59, 232, 139, 0.14); +} + +.ecommerce-auth-modal__notice, +.ecommerce-auth-modal__error { + margin: 0 0 10px; + font-size: 13px; + line-height: 1.6; +} + +.ecommerce-auth-modal__notice { + color: rgba(247, 250, 248, 0.72); +} + +.ecommerce-auth-modal__error { + color: #ff9a9a; +} + +.ecommerce-auth-modal__submit, +.ecommerce-auth-modal__switch { + width: 100%; + min-height: 42px; + margin-top: 16px; + border-radius: 8px; + cursor: pointer; +} + +.ecommerce-auth-modal__submit { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + border: 0; + color: #062012; + background: #52f49f; + font-weight: 800; +} + +.ecommerce-auth-modal__submit:disabled { + opacity: 0.7; + cursor: wait; +} + +.ecommerce-auth-modal__switch { + border: 0; + color: rgba(247, 250, 248, 0.78); + background: transparent; +} + +@media (max-width: 720px) { + .ecommerce-standalone__topbar { + min-height: 58px; + } + + .ecommerce-standalone__brand span, + .ecommerce-standalone__credits { + display: none; + } + + .ecommerce-standalone__content { + padding-top: 58px; + } +} + +/* Standalone ecommerce blue/white theme overrides. */ +.ecommerce-standalone-body { + background: #05233f; +} + +.ecommerce-standalone { + color: #f5fbff; + background: + radial-gradient(circle at 13% 0%, rgba(22, 200, 223, 0.42), transparent 31rem), + radial-gradient(circle at 80% 10%, rgba(8, 118, 216, 0.36), transparent 34rem), + linear-gradient(135deg, #083c67 0%, #062a4e 45%, #051f3d 100%); +} + +.ecommerce-standalone__topbar { + border-bottom-color: rgba(126, 235, 255, 0.22); + background: + linear-gradient(90deg, rgba(7, 72, 121, 0.94), rgba(4, 37, 75, 0.92)); +} + +.ecommerce-standalone__brand::before { + width: 34px; + height: 34px; + flex: 0 0 auto; + border-radius: 10px; + background: + linear-gradient(135deg, #16c8df 0 46%, transparent 46% 54%, #31d7f0 54% 100%), + linear-gradient(45deg, #0876d8, #16c8df); + box-shadow: 0 10px 26px rgba(22, 200, 223, 0.34); + content: ""; + transform: rotate(45deg); +} + +.ecommerce-standalone__brand strong { + color: #f7fbff; +} + +.ecommerce-standalone__brand span, +.ecommerce-standalone__credits, +.ecommerce-standalone__user { + color: rgba(226, 242, 255, 0.62); +} + +.ecommerce-standalone__account button { + border-color: rgba(126, 235, 255, 0.22); + color: #f5fbff; + background: rgba(3, 35, 68, 0.5); +} + +.ecommerce-standalone__account button:hover { + border-color: rgba(22, 200, 223, 0.66); + background: rgba(22, 200, 223, 0.18); +} + +.ecommerce-auth-modal__panel { + border-color: rgba(126, 235, 255, 0.24); + background: linear-gradient(180deg, rgba(6, 54, 94, 0.98), rgba(4, 35, 68, 0.98)); +} + +.ecommerce-auth-modal__eyebrow { + color: #16c8df; +} + +.ecommerce-auth-modal input:focus { + border-color: rgba(22, 200, 223, 0.7); + box-shadow: 0 0 0 3px rgba(22, 200, 223, 0.16); +} + +.ecommerce-auth-modal__submit { + color: #021b2e; + background: linear-gradient(135deg, #16c8df, #18a7ff); +} + +/* Standalone ecommerce: final white theme with #1ebddb accent. */ +.ecommerce-standalone-body { + background: #f8f9fa !important; +} + +.ecommerce-standalone { + color: #10202c !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone__topbar { + border-bottom-color: rgba(30, 189, 219, 0.16) !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone__brand::before { + content: none !important; +} + +.ecommerce-standalone__logo { + position: relative; + display: inline-block; + width: 36px; + height: 36px; + flex: 0 0 36px; + overflow: hidden; + border-radius: 10px; +} + +.ecommerce-standalone__logo i { + position: absolute; + width: 22px; + height: 22px; + border-radius: 8px; +} + +.ecommerce-standalone__logo i:nth-child(1) { + left: 1px; + top: 1px; + background: linear-gradient(135deg, #1f86df 0%, #1974c7 100%); +} + +.ecommerce-standalone__logo i:nth-child(2) { + right: 1px; + top: 1px; + background: linear-gradient(135deg, #24c9ee 0%, #16a7d8 100%); +} + +.ecommerce-standalone__logo i:nth-child(3) { + left: 1px; + bottom: 1px; + background: linear-gradient(135deg, #26c8e9 0%, #17addb 100%); +} + +.ecommerce-standalone__logo i:nth-child(4) { + right: 1px; + bottom: 1px; + background: linear-gradient(135deg, #1778ca 0%, #116abd 100%); +} + +.ecommerce-standalone__logo::before { + position: absolute; + inset: 8px; + z-index: 2; + background: #f8f9fa; + content: ""; + transform: rotate(45deg); +} + +.ecommerce-standalone__logo::after { + position: absolute; + inset: 0; + z-index: 3; + border-radius: inherit; + box-shadow: inset 0 0 0 1px rgba(16, 32, 44, 0.03); + content: ""; + pointer-events: none; +} + +.ecommerce-standalone__brand strong { + color: #10202c !important; +} + +.ecommerce-standalone__brand span, +.ecommerce-standalone__credits, +.ecommerce-standalone__user { + color: #6b7c88 !important; +} + +.ecommerce-standalone__account button { + border-color: rgba(30, 189, 219, 0.22) !important; + color: #10202c !important; + background: #fbfdfe !important; +} + +.ecommerce-standalone__account button:hover { + border-color: #1ebddb !important; + background: rgba(30, 189, 219, 0.1) !important; +} + +.ecommerce-auth-modal__panel { + border-color: rgba(30, 189, 219, 0.22) !important; + background: #fbfdfe !important; +} + +.ecommerce-auth-modal__eyebrow { + color: #1ebddb !important; +} + +.ecommerce-auth-modal h2, +.ecommerce-auth-modal label { + color: #10202c !important; +} + +.ecommerce-auth-modal input { + color: #10202c !important; + background: #f7fbfc !important; + border-color: rgba(30, 189, 219, 0.2) !important; +} + +.ecommerce-auth-modal input:focus { + border-color: #1ebddb !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.14) !important; +} + +.ecommerce-auth-modal__submit { + color: #ffffff !important; + background: #1ebddb !important; +} + +/* Auth modal: dark OmniAI commerce sign-in/register experience. */ +.ecommerce-auth-modal { + place-items: start center !important; + overflow: auto; + padding: clamp(28px, 7vh, 58px) 18px 34px !important; +} + +.ecommerce-auth-modal__scrim { + background: rgba(12, 15, 17, 0.78) !important; + backdrop-filter: blur(8px); +} + +.ecommerce-auth-modal__panel { + width: min(560px, 100%) !important; + padding: 28px clamp(24px, 5vw, 48px) 30px !important; + border-color: rgba(255, 255, 255, 0.08) !important; + border-radius: 0 !important; + color: #f6fbff !important; + background: linear-gradient(180deg, #171b1d 0%, #15191b 100%) !important; + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42) !important; +} + +.ecommerce-auth-modal__close { + border-color: rgba(255, 255, 255, 0.1) !important; + color: #aab5bb !important; + background: rgba(255, 255, 255, 0.04) !important; +} + +.ecommerce-auth-modal__logo { + position: relative; + display: grid; + place-items: center; + width: 58px; + height: 58px; + margin: 0 auto 14px; + overflow: visible; + border-radius: 0; + background: transparent; + box-shadow: none; +} + +.ecommerce-auth-modal__logo img { + display: block; + width: 58px; + height: 58px; + object-fit: contain; +} + +.ecommerce-auth-modal__logo i, +.ecommerce-auth-modal__logo::before { + content: none !important; + display: none !important; +} + +.ecommerce-auth-modal__logo i:nth-child(1) { + left: 1px; + top: 1px; + background: linear-gradient(135deg, #2289e6, #176fc2); +} + +.ecommerce-auth-modal__logo i:nth-child(2) { + right: 1px; + top: 1px; + background: linear-gradient(135deg, #29d2ee, #18a9d8); +} + +.ecommerce-auth-modal__logo i:nth-child(3) { + left: 1px; + bottom: 1px; + background: linear-gradient(135deg, #2ed1ea, #17acd8); +} + +.ecommerce-auth-modal__logo i:nth-child(4) { + right: 1px; + bottom: 1px; + background: linear-gradient(135deg, #1879ca, #1268b9); +} + +.ecommerce-auth-modal__logo::before { + position: absolute; + inset: 13px; + z-index: 2; + background: #171b1d; + content: ""; + transform: rotate(45deg); +} + +.ecommerce-auth-modal h2 { + margin: 0 !important; + color: #f7fbff !important; + font-size: 30px !important; + font-weight: 900; + line-height: 1.15; + text-align: center; +} + +.ecommerce-auth-modal__subtitle { + margin: 8px 0 24px; + color: #95a3aa; + font-size: 15px; + text-align: center; +} + +.ecommerce-auth-modal__tabs, +.ecommerce-auth-modal__methods { + display: grid; + gap: 8px; +} + +.ecommerce-auth-modal__tabs { + grid-template-columns: repeat(2, minmax(0, 1fr)); + margin-bottom: 22px; + padding: 4px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; +} + +.ecommerce-auth-modal__methods { + grid-template-columns: repeat(3, minmax(0, 1fr)); + margin-bottom: 18px; +} + +.ecommerce-auth-modal__tabs button, +.ecommerce-auth-modal__methods button { + min-height: 46px; + border: 1px solid transparent; + border-radius: 9px; + color: #d4dde2; + background: transparent; + font-size: 15px; + font-weight: 900; + cursor: pointer; +} + +.ecommerce-auth-modal__methods button { + border-color: rgba(255, 255, 255, 0.1); + background: rgba(255, 255, 255, 0.025); +} + +.ecommerce-auth-modal__tabs button.is-active, +.ecommerce-auth-modal__methods button.is-active { + border-color: rgba(30, 189, 219, 0.74); + color: #0df7a8; + background: rgba(15, 235, 154, 0.18); +} + +.ecommerce-auth-field { + display: grid !important; + gap: 8px !important; + margin-top: 14px !important; + color: #d9e5e9 !important; + font-size: 14px !important; + font-weight: 900; +} + +.ecommerce-auth-field > span { + display: inline-flex; + align-items: center; + gap: 7px; +} + +.ecommerce-auth-modal input, +.ecommerce-auth-phone-row, +.ecommerce-auth-code-row { + min-height: 50px; +} + +.ecommerce-auth-modal input { + width: 100%; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + border-radius: 10px !important; + padding: 0 14px !important; + color: #eaf6f8 !important; + background: rgba(255, 255, 255, 0.035) !important; + font-size: 16px; +} + +.ecommerce-auth-modal input::placeholder { + color: #82919a; +} + +.ecommerce-auth-modal input:focus { + border-color: #1ebddb !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.2) !important; +} + +.ecommerce-auth-phone-row, +.ecommerce-auth-code-row { + display: grid; + align-items: center; + gap: 12px; +} + +.ecommerce-auth-phone-row { + grid-template-columns: 58px minmax(0, 1fr); +} + +.ecommerce-auth-phone-row b { + display: grid; + place-items: center; + min-height: 50px; + border-right: 1px solid rgba(255, 255, 255, 0.08); + color: #dce8ec; + background: rgba(255, 255, 255, 0.035); + border-radius: 10px 0 0 10px; +} + +.ecommerce-auth-phone-row input { + border-radius: 0 10px 10px 0 !important; +} + +.ecommerce-auth-code-row { + grid-template-columns: minmax(0, 1fr) 112px; +} + +.ecommerce-auth-code-row button { + min-height: 50px; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 10px; + color: #8f9da5; + background: rgba(255, 255, 255, 0.035); + font-weight: 900; +} + +.ecommerce-auth-modal__forgot { + display: block; + margin: 12px 0 0 auto; + border: 0; + color: #0df7a8; + background: transparent; + font-weight: 900; + cursor: pointer; +} + +.ecommerce-auth-modal__error { + margin: 10px 0 0 !important; + color: #ff6b74 !important; +} + +.ecommerce-auth-modal__submit { + min-height: 52px !important; + margin-top: 18px !important; + border: 0 !important; + border-radius: 10px !important; + color: #061817 !important; + background: linear-gradient(135deg, #0df7a8, #00f089) !important; + font-size: 17px; + font-weight: 950; +} + +.ecommerce-auth-modal__agreement { + margin: 16px 0 20px; + color: #83919a; + font-size: 12px; + text-align: center; +} + +.ecommerce-auth-modal__agreement a { + color: #0df7a8; + font-weight: 900; + text-decoration: none; +} + +.ecommerce-auth-modal__divider { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; + gap: 12px; + color: #737f86; + font-size: 13px; +} + +.ecommerce-auth-modal__divider::before, +.ecommerce-auth-modal__divider::after { + height: 1px; + background: rgba(255, 255, 255, 0.08); + content: ""; +} + +.ecommerce-auth-modal__mobile-alt { + display: grid; + place-items: center; + width: 48px; + height: 48px; + margin: 14px auto 0; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 999px; + color: #d2dde2; + background: rgba(255, 255, 255, 0.035); + font-size: 20px; + cursor: pointer; +} + +@media (max-width: 620px) { + .ecommerce-auth-modal__panel { + padding: 24px 18px 28px !important; + } + + .ecommerce-auth-modal__methods, + .ecommerce-auth-code-row { + grid-template-columns: minmax(0, 1fr); + } +} + +/* Auth modal localized to the ecommerce blue/white UI. */ +.ecommerce-auth-modal { + min-height: 100dvh; + place-items: center !important; + overflow: auto; + padding: clamp(18px, 4vh, 42px) 18px !important; +} + +.ecommerce-auth-modal__scrim { + background: + radial-gradient(circle at 50% 42%, rgba(29, 190, 219, 0.18), transparent 34rem), + rgba(248, 249, 250, 0.72) !important; + animation: ecommerce-auth-scrim-in 180ms ease both; +} + +.ecommerce-auth-modal__panel { + border-color: rgba(16, 115, 204, 0.14) !important; + color: #10202c !important; + background: #feffff !important; + box-shadow: 0 28px 90px rgba(16, 115, 204, 0.16), 0 12px 34px rgba(20, 80, 100, 0.08) !important; + animation: ecommerce-auth-panel-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.ecommerce-auth-modal__close, +.ecommerce-auth-modal__mobile-alt, +.ecommerce-auth-code-row button { + border-color: rgba(16, 115, 204, 0.14) !important; + color: #566b78 !important; + background: #f8fbfc !important; +} + +.ecommerce-auth-modal__logo::before { + background: #feffff !important; +} + +.ecommerce-auth-modal h2 { + color: #10202c !important; +} + +.ecommerce-auth-modal__subtitle, +.ecommerce-auth-modal__agreement, +.ecommerce-auth-modal__divider { + color: #6b7c88 !important; +} + +.ecommerce-auth-modal__tabs { + border-color: rgba(16, 115, 204, 0.14) !important; + background: #f3f8fa; +} + +.ecommerce-auth-modal__tabs button, +.ecommerce-auth-modal__methods button { + color: #425765 !important; +} + +.ecommerce-auth-modal__methods button { + border-color: rgba(16, 115, 204, 0.14) !important; + background: #feffff !important; +} + +.ecommerce-auth-modal__tabs button.is-active, +.ecommerce-auth-modal__methods button.is-active { + border-color: rgba(29, 190, 219, 0.66) !important; + color: #1073cc !important; + background: rgba(29, 190, 219, 0.12) !important; + box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.08); +} + +.ecommerce-auth-field { + color: #10202c !important; +} + +.ecommerce-auth-modal input { + border-color: rgba(16, 115, 204, 0.14) !important; + color: #10202c !important; + background: #f8fbfc !important; +} + +.ecommerce-auth-modal input::placeholder { + color: #8da0ab !important; +} + +.ecommerce-auth-modal input:focus { + border-color: #1dbedb !important; + box-shadow: 0 0 0 3px rgba(29, 190, 219, 0.16) !important; +} + +.ecommerce-auth-phone-row b { + border-right-color: rgba(16, 115, 204, 0.14) !important; + color: #1073cc !important; + background: #f3f8fa !important; +} + +.ecommerce-auth-modal__forgot, +.ecommerce-auth-modal__agreement a { + color: #1073cc !important; +} + +.ecommerce-auth-modal__submit { + color: #ffffff !important; + background: linear-gradient(135deg, #1073cc, #1dbedb) !important; + box-shadow: 0 16px 34px rgba(29, 190, 219, 0.24); +} + +.ecommerce-auth-modal__divider::before, +.ecommerce-auth-modal__divider::after { + background: rgba(16, 115, 204, 0.12) !important; +} + +@keyframes ecommerce-auth-scrim-in { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes ecommerce-auth-panel-in { + from { + opacity: 0; + transform: translateY(14px) scale(0.985); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@media (prefers-reduced-motion: reduce) { + .ecommerce-auth-modal__scrim, + .ecommerce-auth-modal__panel { + animation: none !important; + } +} + +/* Local auth UI typography and rounder modal controls. */ +.ecommerce-standalone, +.ecommerce-standalone button, +.ecommerce-standalone input, +.ecommerce-auth-modal, +.ecommerce-auth-modal button, +.ecommerce-auth-modal input { + font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif !important; +} + +.ecommerce-auth-modal { + color: #10202c; + font-weight: 500; +} + +.ecommerce-auth-modal__panel { + border-radius: 30px !important; +} + +.ecommerce-auth-modal h2 { + color: #10202c !important; + font-weight: 900 !important; +} + +.ecommerce-auth-modal__eyebrow, +.ecommerce-auth-modal__subtitle, +.ecommerce-auth-modal__agreement, +.ecommerce-auth-modal__divider, +.ecommerce-auth-field, +.ecommerce-auth-modal input { + font-weight: 500 !important; +} + +.ecommerce-auth-modal__tabs button, +.ecommerce-auth-modal__methods button, +.ecommerce-auth-code-row button, +.ecommerce-auth-modal__forgot, +.ecommerce-auth-modal__submit, +.ecommerce-auth-modal__switch, +.ecommerce-auth-modal__mobile-alt { + font-weight: 600 !important; +} + +.ecommerce-auth-modal__close, +.ecommerce-auth-modal__tabs, +.ecommerce-auth-modal__methods, +.ecommerce-auth-modal__tabs button, +.ecommerce-auth-modal__methods button, +.ecommerce-auth-modal input, +.ecommerce-auth-code-row button, +.ecommerce-auth-modal__submit { + border-radius: 16px !important; +} + +.ecommerce-auth-phone-row b { + font-weight: 600 !important; + border-radius: 16px 0 0 16px !important; +} + +.ecommerce-auth-phone-row input { + border-radius: 0 16px 16px 0 !important; +} + +/* Logged-in profile menu and standalone profile page. */ +.ecommerce-standalone__brand { + border: 0; + color: inherit; + background: transparent; + cursor: pointer; +} + +.ecommerce-profile-menu { + position: relative; + display: flex; + align-items: center; + gap: 12px; +} + +.ecommerce-profile-menu__trigger { + min-height: 42px !important; + padding: 0 14px 0 6px !important; + border-radius: 16px !important; + color: #10202c !important; + background: #feffff !important; + box-shadow: 0 10px 28px rgba(16, 115, 204, 0.08); +} + +.local-user-avatar { + display: inline-grid; + flex: 0 0 auto; + place-items: center; + overflow: hidden; + border: 2px solid rgba(30, 189, 219, 0.62); + border-radius: 14px; + color: #fff; + background: linear-gradient(135deg, #1073cc, #1dbedb); + font-weight: 800; +} + +.local-user-avatar img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.local-user-avatar--sm { + width: 34px; + height: 34px; +} + +.local-user-avatar--md { + width: 52px; + height: 52px; +} + +.local-user-avatar--lg { + width: 96px; + height: 96px; + border-radius: 28px; +} + +.ecommerce-profile-popover { + position: absolute; + top: calc(100% + 12px); + right: 0; + z-index: 120; + width: 336px; + padding: 20px; + border: 1px solid rgba(16, 115, 204, 0.14); + border-radius: 24px; + color: #10202c; + background: rgba(254, 255, 255, 0.98); + box-shadow: 0 28px 80px rgba(16, 115, 204, 0.18); + animation: ecommerce-auth-panel-in 180ms cubic-bezier(0.22, 1, 0.36, 1) both; +} + +.ecommerce-profile-popover__head { + display: flex; + align-items: center; + gap: 14px; + padding-bottom: 16px; + border-bottom: 1px solid rgba(16, 115, 204, 0.12); +} + +.ecommerce-profile-popover__head strong { + display: block; + color: #10202c; + font-size: 18px; + font-weight: 900; +} + +.ecommerce-profile-popover__head span { + display: block; + margin-top: 2px; + color: #526675; + font-weight: 500; +} + +.ecommerce-profile-popover__stats { + display: grid; + gap: 9px; + margin: 16px 0; + padding-bottom: 16px; + border-bottom: 1px solid rgba(16, 115, 204, 0.12); +} + +.ecommerce-profile-popover__stats div { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} + +.ecommerce-profile-popover__stats dt, +.ecommerce-profile-popover__stats dd { + margin: 0; +} + +.ecommerce-profile-popover__stats dt { + display: inline-flex; + align-items: center; + gap: 8px; + color: #526675; + font-weight: 500; +} + +.ecommerce-profile-popover__stats dd { + color: #10202c; + font-weight: 700; +} + +.ecommerce-profile-popover__actions { + display: grid; + gap: 12px; +} + +.ecommerce-profile-popover__actions button, +.local-profile-card button, +.local-profile-page__back { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 8px; + min-height: 42px; + border: 1px solid rgba(16, 115, 204, 0.14); + border-radius: 15px; + color: #10202c; + background: #f8fbfc; + font-weight: 600; + cursor: pointer; +} + +.ecommerce-profile-popover__actions button.is-primary, +.local-profile-card__primary { + border-color: rgba(29, 190, 219, 0.45) !important; + color: #fff !important; + background: linear-gradient(135deg, #1073cc, #1dbedb) !important; +} + +.ecommerce-profile-popover__actions button.is-danger, +.local-profile-card__danger { + color: #d04444 !important; +} + +.local-profile-page { + height: 100%; + overflow: auto; + color: #10202c; + background: + radial-gradient(42rem 18rem at 48% 7%, rgba(29, 190, 219, 0.18), transparent 72%), + linear-gradient(180deg, #f8f9fa 0%, #eef9fc 46%, #f8f9fa 100%); +} + +.local-profile-page__hero { + position: relative; + min-height: 210px; + background: + linear-gradient(180deg, rgba(16, 115, 204, 0.2), rgba(248, 249, 250, 0.92)), + radial-gradient(36rem 15rem at 34% 8%, rgba(16, 115, 204, 0.34), transparent 70%), + radial-gradient(32rem 14rem at 66% 18%, rgba(29, 190, 219, 0.28), transparent 72%); +} + +.local-profile-page__back { + position: absolute; + top: 24px; + right: 32px; + background: rgba(254, 255, 255, 0.84); + backdrop-filter: blur(14px); +} + +.local-profile-page__body { + display: grid; + grid-template-columns: 342px minmax(0, 1fr); + gap: 30px; + width: min(1380px, calc(100% - 56px)); + margin: -72px auto 48px; +} + +.local-profile-card, +.local-profile-tabs, +.local-profile-works { + border: 1px solid rgba(16, 115, 204, 0.12); + border-radius: 24px; + background: rgba(254, 255, 255, 0.94); + box-shadow: 0 24px 70px rgba(16, 115, 204, 0.1); +} + +.local-profile-card { + position: sticky; + top: 84px; + align-self: start; + padding: 24px; +} + +.local-profile-card__head { + display: grid; + justify-items: center; + gap: 10px; + text-align: center; +} + +.local-profile-card__avatar-wrap { + position: relative; +} + +.local-profile-card__avatar-wrap > .anticon { + position: absolute; + right: -2px; + bottom: 6px; + color: #1dbedb; + background: #feffff; + border-radius: 999px; + font-size: 20px; +} + +.local-profile-card__head strong { + font-size: 24px; + font-weight: 900; +} + +.local-profile-card__uid { + width: 100%; + padding: 10px 12px; + border: 1px solid rgba(16, 115, 204, 0.12); + border-radius: 999px; + color: #526675; +} + +.local-profile-card__stats, +.local-profile-card__credits, +.local-profile-card__meta { + display: grid; + gap: 10px; + margin-top: 18px; +} + +.local-profile-card__stats { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.local-profile-card__stats span, +.local-profile-card__credits span, +.local-profile-card__meta span { + display: grid; + gap: 4px; + padding: 14px; + border: 1px solid rgba(16, 115, 204, 0.12); + border-radius: 16px; + background: #f8fbfc; +} + +.local-profile-card strong { + color: #10202c; +} + +.local-profile-card em { + color: #637889; + font-style: normal; + font-weight: 500; +} + +.local-profile-card__credits { + grid-template-columns: 1fr 1fr; +} + +.local-profile-card__credits span:first-child { + grid-column: span 2; + color: #1073cc; + background: rgba(29, 190, 219, 0.1); +} + +.local-profile-card__credits strong, +.local-profile-card__meta strong { + font-size: 18px; +} + +.local-profile-card__primary, +.local-profile-card__secondary, +.local-profile-card__danger { + width: 100%; + margin-top: 12px; +} + +.local-profile-main { + display: grid; + gap: 18px; + min-width: 0; +} + +.local-profile-tabs { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 8px; + padding: 8px; +} + +.local-profile-tabs button { + min-height: 44px; + border: 1px solid rgba(16, 115, 204, 0.12); + border-radius: 16px; + color: #526675; + background: #f8fbfc; + font-weight: 700; +} + +.local-profile-tabs button.is-active { + border-color: rgba(29, 190, 219, 0.5); + color: #1073cc; + background: rgba(29, 190, 219, 0.12); +} + +.local-profile-works { + padding: 24px; +} + +.local-profile-works header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 16px; + margin-bottom: 18px; +} + +.local-profile-works header strong { + display: block; + font-size: 22px; + font-weight: 900; +} + +.local-profile-works header span, +.local-profile-works header em { + color: #637889; + font-style: normal; + font-weight: 500; +} + +.local-profile-works header em { + padding: 7px 14px; + border: 1px solid rgba(29, 190, 219, 0.32); + border-radius: 999px; + color: #1073cc; + background: rgba(29, 190, 219, 0.08); +} + +.local-profile-work-grid { + display: grid; + grid-template-columns: repeat(3, minmax(220px, 1fr)); + gap: 14px; +} + +.local-profile-work-card { + display: grid; + grid-template-columns: 106px minmax(0, 1fr); + gap: 14px; + min-height: 132px; + padding: 14px; + border: 1px solid rgba(16, 115, 204, 0.12); + border-radius: 18px; + background: #f8fbfc; +} + +.local-profile-work-card img { + width: 106px; + height: 106px; + border-radius: 14px; + object-fit: cover; +} + +.local-profile-work-card span { + display: inline-flex; + width: max-content; + margin-bottom: 5px; + padding: 3px 9px; + border-radius: 999px; + color: #1073cc; + background: rgba(29, 190, 219, 0.12); + font-size: 12px; + font-weight: 700; +} + +.local-profile-work-card strong { + display: block; + overflow: hidden; + color: #10202c; + font-weight: 900; + text-overflow: ellipsis; + white-space: nowrap; +} + +.local-profile-work-card p { + display: -webkit-box; + overflow: hidden; + margin: 6px 0 10px; + color: #526675; + font-weight: 500; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.local-profile-work-card em { + color: #7b8e9a; + font-style: normal; + font-weight: 500; +} + +.local-profile-work-grid--empty { + display: block; +} + +.local-profile-empty { + display: grid; + min-height: 220px; + place-items: center; + gap: 8px; + padding: 36px 20px; + border: 1px dashed rgba(30, 189, 219, 0.22); + border-radius: 18px; + color: #6c7d88; + text-align: center; + background: #f8fbfc; +} + +.local-profile-empty strong { + color: #10202c; + font-size: 15px; +} + +.local-profile-empty span { + max-width: 360px; + font-size: 13px; + line-height: 1.6; +} + +@media (max-width: 980px) { + .local-profile-page__body { + grid-template-columns: minmax(0, 1fr); + } + + .local-profile-card { + position: static; + } + + .local-profile-work-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } +} + +@media (max-width: 640px) { + .ecommerce-profile-popover { + right: -8px; + width: min(336px, calc(100vw - 24px)); + } + + .local-profile-page__body { + width: calc(100% - 24px); + } + + .local-profile-tabs, + .local-profile-work-grid { + grid-template-columns: minmax(0, 1fr); + } +} + +/* Final account popover corrections: independent modal, compact metric rows. */ +.ecommerce-standalone .ecommerce-profile-menu { + position: static !important; +} + +.ecommerce-standalone .ecommerce-profile-menu__trigger { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 9px !important; + min-height: 44px !important; + padding: 0 15px 0 7px !important; + border-radius: 16px !important; +} + +.ecommerce-standalone .ecommerce-standalone__credits { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 40px !important; + padding: 0 14px !important; + border: 1px solid rgba(30, 189, 219, 0.14) !important; + border-radius: 15px !important; + color: #10202c !important; + background: #f8f9fa !important; + box-shadow: 0 10px 26px rgba(16, 115, 204, 0.06) !important; + font-size: 13px !important; + font-weight: 600 !important; + line-height: 1 !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__backdrop { + position: fixed !important; + inset: 0 !important; + z-index: 118 !important; + min-height: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecommerce-profile-popover { + position: fixed !important; + top: 62px !important; + right: 22px !important; + z-index: 130 !important; + display: block !important; + width: min(338px, calc(100vw - 28px)) !important; + max-height: calc(100vh - 82px); + overflow: auto; + padding: 20px !important; + border: 1px solid rgba(16, 115, 204, 0.16) !important; + border-radius: 20px !important; + color: #10202c !important; + background: rgba(254, 255, 255, 0.98) !important; + box-shadow: 0 28px 80px rgba(16, 115, 204, 0.18) !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__stats { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + gap: 10px !important; + margin: 16px 0 !important; + padding: 0 0 16px !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__stats div { + display: flex !important; + flex-direction: row !important; + align-items: center !important; + justify-content: space-between !important; + gap: 16px !important; + min-height: 24px !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__stats dt, +.ecommerce-standalone .ecommerce-profile-popover__stats dd { + display: inline-flex !important; + align-items: center !important; + margin: 0 !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__stats dt { + gap: 7px !important; + min-width: 72px !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__stats dd { + justify-content: flex-end !important; + flex: 1 1 auto !important; + text-align: right !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__actions { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + gap: 11px !important; +} + +.ecommerce-standalone .ecommerce-profile-popover__actions button { + width: 100% !important; + min-height: 40px !important; + padding: 0 14px !important; +} + +/* Profile page tabs should be a compact segmented control, not tall cards. */ +.ecommerce-standalone .local-profile-main { + align-content: start !important; +} + +.ecommerce-standalone .local-profile-tabs { + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + align-items: center !important; + gap: 8px !important; + height: auto !important; + min-height: 60px !important; + padding: 8px !important; + border-radius: 18px !important; + background: rgba(254, 255, 255, 0.94) !important; +} + +.ecommerce-standalone .local-profile-tabs button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 100% !important; + height: 44px !important; + min-height: 44px !important; + padding: 0 14px !important; + border-radius: 13px !important; + color: #526675 !important; + line-height: 1 !important; + white-space: nowrap !important; + background: #f8fbfc !important; +} + +.ecommerce-standalone .local-profile-tabs button.is-active { + color: #1073cc !important; + background: rgba(29, 190, 219, 0.12) !important; +} + +/* Keep the profile dashboard evenly inset on both sides. */ +.ecommerce-standalone .local-profile-page { + overflow-x: hidden !important; +} + +.ecommerce-standalone .local-profile-page__body { + box-sizing: border-box !important; + grid-template-columns: minmax(280px, 342px) minmax(0, 1fr) !important; + width: 100% !important; + max-width: 1380px !important; + padding: 0 clamp(24px, 4vw, 56px) !important; + margin-right: auto !important; + margin-left: auto !important; +} + +.ecommerce-standalone .local-profile-main, +.ecommerce-standalone .local-profile-tabs, +.ecommerce-standalone .local-profile-works { + box-sizing: border-box !important; + min-width: 0 !important; + max-width: 100% !important; +} + +.ecommerce-standalone .local-profile-tabs { + overflow: hidden !important; +} + +.ecommerce-standalone .local-profile-page__back { + right: clamp(24px, 4vw, 56px) !important; +} + +/* Final ecommerce header, inline uploads, and compact setting buttons. */ +.ecommerce-standalone .ecommerce-standalone__brand { + gap: 10px !important; +} + +.ecommerce-standalone .ecommerce-standalone__brand strong { + font-weight: 900 !important; + letter-spacing: 0 !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo { + position: relative !important; + width: 40px !important; + height: 40px !important; + flex-basis: 40px !important; + border-radius: 8px !important; + background: #101820 !important; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo i { + position: absolute !important; + width: 25px !important; + height: 25px !important; + border-radius: 7px !important; + transform: rotate(45deg) !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo i:nth-child(1) { + left: 3px !important; + top: 3px !important; + background: linear-gradient(135deg, #1c86df, #126dc4) !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo i:nth-child(2) { + right: 3px !important; + top: 3px !important; + background: linear-gradient(135deg, #25d1ef, #1697d5) !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo i:nth-child(3) { + left: 3px !important; + bottom: 3px !important; + background: linear-gradient(135deg, #19c6e4, #12a4d9) !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo i:nth-child(4) { + right: 3px !important; + bottom: 3px !important; + background: linear-gradient(135deg, #1a7fd5, #1265b4) !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo::before { + position: absolute !important; + inset: 11px !important; + z-index: 3 !important; + border-radius: 3px !important; + background: #101820 !important; + content: "" !important; + transform: rotate(45deg) !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo::after { + content: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: auto minmax(64px, auto) auto !important; + row-gap: 12px !important; + min-height: 0 !important; + padding: 18px 20px 16px !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference { + position: absolute !important; + left: 18px !important; + bottom: 15px !important; + z-index: 8 !important; + display: inline-grid !important; + grid-auto-flow: column !important; + place-items: center !important; + gap: 8px !important; + width: auto !important; + min-width: 42px !important; + height: 40px !important; + min-height: 40px !important; + margin: 0 !important; + padding: 0 10px !important; + border: 0 !important; + border-radius: 12px !important; + background: transparent !important; + transform: none !important; + pointer-events: auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference span { + font-size: 28px !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference strong { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover { + position: static !important; + grid-column: 1 !important; + grid-row: 1 !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 10px !important; + width: 100% !important; + max-width: 100% !important; + min-height: 70px !important; + padding: 12px 14px !important; + border: 0 !important; + border-bottom: 1px solid rgba(16, 115, 204, 0.08) !important; + border-radius: 22px 22px 0 0 !important; + background: + radial-gradient(circle at 30% 0%, rgba(30, 189, 219, 0.08), transparent 18rem), + linear-gradient(90deg, rgba(16, 115, 204, 0.035), rgba(30, 189, 219, 0.045), rgba(255, 225, 180, 0.04)) !important; + box-shadow: none !important; + animation: none !important; + transform: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb { + width: 78px !important; + height: 78px !important; + border-radius: 14px !important; + overflow: visible !important; + background: #f2f6f8 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb img, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb video { + border-radius: 14px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb > button { + top: -7px !important; + right: -7px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-add { + width: 44px !important; + height: 44px !important; + border: 0 !important; + border-radius: 12px !important; + background: #f3f8fa !important; + font-size: 28px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea { + grid-column: 1 !important; + grid-row: 2 !important; + min-height: 56px !important; + padding: 8px 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar { + grid-column: 1 !important; + grid-row: 3 !important; + align-items: center !important; + justify-content: space-between !important; + gap: 12px !important; + padding-top: 8px !important; + padding-left: 52px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row { + flex: 0 1 auto !important; + flex-wrap: wrap !important; + gap: 6px !important; + padding-left: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button { + flex: 0 0 auto !important; + width: auto !important; + max-width: 148px !important; + min-width: 0 !important; + min-height: 34px !important; + padding: 0 9px !important; + gap: 4px !important; + border-radius: 11px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button span { + max-width: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-submit-row { + flex: 0 0 auto !important; +} + +/* Remove oversized blanks in composer popovers and keep the logo on white. */ +.ecommerce-standalone .ecommerce-standalone__logo { + background: #ffffff !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo::before { + background: #ffffff !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover { + right: auto !important; + width: max-content !important; + min-width: min(360px, calc(100vw - 56px)) !important; + max-width: min(760px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--grid, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--list, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--languages, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--detail, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--model, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--video { + display: flex !important; + flex-wrap: wrap !important; + align-items: flex-start !important; + justify-content: flex-start !important; + grid-template-columns: none !important; + gap: 8px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--detail button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--model button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--video button { + flex: 0 0 auto !important; + width: auto !important; + min-width: 84px !important; + max-width: 190px !important; + min-height: 38px !important; + padding: 8px 13px !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings { + width: max-content !important; + max-width: 100% !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--split { + display: flex !important; + flex-wrap: wrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--split > div { + width: max-content !important; + min-width: 0 !important; + max-width: 100% !important; +} + +/* All command popovers: three columns, two visible rows, scroll for the rest. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover { + width: min(620px, calc(100vw - 56px)) !important; + min-width: 0 !important; + max-width: min(620px, calc(100vw - 56px)) !important; + max-height: 178px !important; + overflow-x: hidden !important; + overflow-y: auto !important; + scrollbar-gutter: stable; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--grid, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--list, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--languages { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + align-items: start !important; + gap: 8px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + align-items: start !important; + gap: 10px !important; + max-height: 214px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover header, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover-note, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-range, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-layout { + grid-column: 1 / -1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--detail, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--model, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--video, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-levels { + grid-column: 1 / -1 !important; + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 8px !important; + max-height: 104px !important; + overflow-x: hidden !important; + overflow-y: auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-levels button { + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + min-height: 44px !important; + padding: 8px 12px !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-count-row { + display: grid !important; + grid-template-columns: minmax(0, 1fr) auto !important; + min-width: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings > .ecom-command-count-row { + grid-column: span 1 !important; + min-height: 72px !important; +} + +/* Settings exceptions: counters and hot-replicate layout should not be crushed. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings { + max-height: 260px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings > .ecom-command-count-row { + min-height: 86px !important; + padding: 12px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings:has(> .ecom-command-count-row) { + width: min(720px, calc(100vw - 56px)) !important; + max-width: min(720px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings:has(> .ecom-command-count-row) { + grid-template-columns: repeat(3, minmax(190px, 1fr)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-count-row > span { + min-width: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-count-row > span strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-count-row > span em { + display: block !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-count-row > div { + display: inline-flex !important; + align-items: center !important; + gap: 6px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-count-row > div button { + width: 28px !important; + min-width: 28px !important; + max-width: 28px !important; + height: 28px !important; + min-height: 28px !important; + padding: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-layout { + display: grid !important; + grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.62fr) !important; + gap: 12px !important; + max-height: none !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-layout .ecom-command-hot-upload { + min-height: 156px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-levels { + grid-column: auto !important; + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: repeat(2, minmax(0, 1fr)) !important; + gap: 10px !important; + max-height: none !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-levels button { + min-height: 72px !important; + white-space: normal !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-thumb-grid { + display: grid !important; + grid-template-columns: repeat(3, 54px) !important; + gap: 8px !important; + max-height: 118px !important; + overflow-x: visible !important; + overflow-y: auto !important; + padding: 2px 4px 2px 2px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-thumb { + position: relative !important; + display: block !important; + width: 54px !important; + height: 54px !important; + border-radius: 10px !important; + background: #eef6f8 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-thumb > img { + display: block !important; + width: 100% !important; + height: 100% !important; + border-radius: inherit !important; + object-fit: cover !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-zoom { + position: absolute !important; + left: calc(100% + 12px) !important; + top: 50% !important; + z-index: 200 !important; + display: none !important; + width: min(320px, 70vw) !important; + max-height: min(360px, 70vh) !important; + padding: 8px !important; + border: 1px solid rgba(30, 189, 219, 0.28) !important; + border-radius: 16px !important; + background: #feffff !important; + box-shadow: 0 18px 46px rgba(20, 80, 100, 0.18) !important; + pointer-events: none !important; + transform: translateY(-50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-thumb:hover .ecom-command-hot-zoom { + display: block !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-zoom img { + display: block !important; + width: 100% !important; + height: auto !important; + max-height: calc(min(360px, 70vh) - 16px) !important; + border-radius: 10px !important; + object-fit: contain !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--list, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + grid-auto-rows: minmax(44px, auto) !important; + max-height: 122px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--list button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button { + width: 100% !important; + min-width: 0 !important; + max-width: none !important; +} + +/* Make the upload entry obvious and keep it out of the text input area. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + padding-bottom: 18px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference { + left: 20px !important; + bottom: 18px !important; + width: auto !important; + min-width: 76px !important; + height: 44px !important; + min-height: 44px !important; + padding: 0 15px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 999px !important; + color: #10202c !important; + background: #feffff !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference span { + display: inline-block !important; + color: #10202c !important; + font-size: 32px !important; + font-weight: 300 !important; + line-height: 1 !important; + transform: translateY(-1px); +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference strong { + display: inline !important; + max-width: none !important; + color: #10202c !important; + font-size: 15px !important; + font-weight: 600 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference:hover, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.has-images, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.is-dragging { + border-color: rgba(30, 189, 219, 0.55) !important; + color: #1073cc !important; + background: rgba(30, 189, 219, 0.08) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea { + grid-row: 1 / 3 !important; + min-height: 96px !important; + padding: 10px 0 58px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover + textarea, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover ~ textarea { + grid-row: 2 !important; + min-height: 58px !important; + padding: 18px 0 12px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar { + position: relative !important; + z-index: 6 !important; + padding-left: 104px !important; +} + +/* Ratio popover: no oversized blank space from long size labels. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--ratio { + width: min(520px, calc(100vw - 56px)) !important; + max-width: min(520px, calc(100vw - 56px)) !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--ratio button { + display: block !important; + overflow: hidden !important; + min-width: 0 !important; + width: 100% !important; + max-width: none !important; + text-align: left !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +/* Right history panel should sit flush with the content top. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history { + top: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools { + padding-top: 12px !important; +} + +/* Prevent long option labels from overflowing their buttons. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover *, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row * { + box-sizing: border-box !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button { + overflow: hidden !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-button-text, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button > strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button > span, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button > span { + display: block !important; + min-width: 0 !important; + max-width: 100% !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--ratio { + width: min(480px, calc(100vw - 56px)) !important; + max-width: min(480px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--ratio button { + min-width: 0 !important; + padding-right: 10px !important; + padding-left: 10px !important; +} + +/* Final composer sizing pass: buttons use their content width and keep full labels visible. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar { + padding-left: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row { + display: flex !important; + flex: 1 1 auto !important; + flex-wrap: wrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 6px !important; + min-width: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button { + flex: 0 0 auto !important; + width: max-content !important; + min-width: 0 !important; + max-width: none !important; + height: 34px !important; + min-height: 34px !important; + padding: 0 10px !important; + gap: 5px !important; + white-space: nowrap !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button > span { + display: inline !important; + flex: 0 0 auto !important; + width: auto !important; + min-width: 0 !important; + max-width: none !important; + overflow: visible !important; + text-overflow: clip !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button > .ecom-command-option-icon { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + flex: 0 0 16px !important; + width: 16px !important; + height: 16px !important; + min-width: 16px !important; + color: #4d7184 !important; + font-size: 15px !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button.is-active > .ecom-command-option-icon, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button:hover > .ecom-command-option-icon { + color: #1073cc !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference { + position: absolute !important; + grid-column: 1 !important; + grid-row: 3 !important; + left: 20px !important; + top: 8px !important; + bottom: auto !important; + z-index: 8 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 4px !important; + width: auto !important; + min-width: 78px !important; + max-width: none !important; + height: 34px !important; + min-height: 34px !important; + padding: 0 11px !important; + border-radius: 11px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference span { + font-size: 20px !important; + line-height: 1 !important; + transform: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference strong { + display: inline !important; + font-size: 13px !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid { + width: max-content !important; + min-width: 0 !important; + max-width: min(620px, calc(100vw - 56px)) !important; + display: flex !important; + flex-wrap: wrap !important; + align-items: flex-start !important; + justify-content: flex-start !important; + gap: 8px !important; + max-height: 122px !important; + overflow-x: hidden !important; + overflow-y: auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid button { + flex: 0 0 auto !important; + width: max-content !important; + min-width: 0 !important; + max-width: none !important; + padding: 8px 15px !important; + overflow: visible !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--list:not(.ecom-command-popover--ratio), +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + grid-template-columns: repeat(3, max-content) !important; + width: max-content !important; + min-width: 0 !important; + max-width: min(680px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--list:not(.ecom-command-popover--ratio) button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button { + width: max-content !important; + min-width: 0 !important; + max-width: none !important; + overflow: visible !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--ratio { + grid-template-columns: repeat(3, max-content) !important; + width: max-content !important; + min-width: 0 !important; + max-width: min(860px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--ratio button { + display: inline-flex !important; + width: max-content !important; + min-width: 0 !important; + max-width: none !important; + overflow: visible !important; + text-align: left !important; + text-overflow: clip !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-button-text { + display: inline !important; + max-width: none !important; + overflow: visible !important; + text-overflow: clip !important; + white-space: nowrap !important; +} + +/* Keep command popovers visually attached to the composer. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover { + bottom: -2px !important; +} + +/* Softer popover and side-panel motion. */ +@keyframes ecommerce-soft-popover-in { + 0% { + opacity: 0; + filter: blur(2px); + transform: translate3d(0, 12px, 0) scale(0.972); + } + 58% { + opacity: 1; + filter: blur(0); + transform: translate3d(0, -2px, 0) scale(1.004); + } + 100% { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0) scale(1); + } +} + +@keyframes ecommerce-soft-drop-in { + 0% { + opacity: 0; + filter: blur(2px); + transform: translate3d(0, -10px, 0) scale(0.976); + } + 62% { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 2px, 0) scale(1.003); + } + 100% { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0) scale(1); + } +} + +@keyframes ecommerce-soft-scrim-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover, +.ecommerce-standalone .ecommerce-profile-popover, +.ecommerce-standalone .product-set-preview-modal { + transform-origin: top left !important; + will-change: opacity, transform, filter !important; + animation: ecommerce-soft-popover-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecommerce-auth-modal__panel { + transform-origin: center !important; + will-change: opacity, transform, filter !important; + animation: ecommerce-soft-popover-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecommerce-auth-modal__scrim, +.ecommerce-standalone .ecommerce-profile-popover__backdrop, +.ecommerce-standalone .product-set-preview-backdrop { + animation: ecommerce-soft-scrim-in 300ms ease-out both !important; +} + +.ecommerce-standalone .ecom-command-asset-popover { + transform-origin: top left !important; + will-change: opacity, transform, filter !important; + animation: ecommerce-soft-drop-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history { + transition: + transform 440ms cubic-bezier(0.16, 1, 0.3, 1), + opacity 300ms ease, + box-shadow 320ms ease, + border-color 320ms ease !important; + will-change: transform, opacity !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list { + transition: + opacity 260ms ease, + transform 360ms cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__tools, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__list { + opacity: 0.96 !important; +} + +@media (prefers-reduced-motion: reduce) { + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover, + .ecommerce-standalone .ecommerce-profile-popover, + .ecommerce-standalone .product-set-preview-modal, + .ecommerce-standalone .ecommerce-auth-modal__panel, + .ecommerce-standalone .ecommerce-auth-modal__scrim, + .ecommerce-standalone .ecommerce-profile-popover__backdrop, + .ecommerce-standalone .product-set-preview-backdrop, + .ecommerce-standalone .ecom-command-asset-popover, + .ecommerce-standalone .ecom-tool-page-enter, + .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar, + .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel, + .ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side, + .ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side, + .ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav, + .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage, + .ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace, + .ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage, + .ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload, + .ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor, + .ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section, + .ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel, + .ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel { + animation: none !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history, + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools, + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list { + transition: none !important; + } +} + +/* Align the upload action with the command pill buttons. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer > .ecom-command-reference:not(.ecom-command-reference--inline) { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference { + box-sizing: border-box !important; + position: static !important; + grid-column: auto !important; + grid-row: auto !important; + inset: auto !important; + z-index: auto !important; + flex: 0 0 auto !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 5px !important; + width: max-content !important; + min-width: 0 !important; + max-width: none !important; + height: 34px !important; + min-height: 34px !important; + padding: 0 10px !important; + border: 1px solid rgba(30, 189, 219, 0.22) !important; + border-radius: 11px !important; + color: #10202c !important; + background: #f3f8fa !important; + box-shadow: none !important; + font-size: 13px !important; + font-weight: 500 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference span { + display: inline !important; + color: inherit !important; + font-size: 13px !important; + font-weight: 500 !important; + line-height: 1 !important; + transform: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference strong { + display: inline !important; + color: inherit !important; + font-size: 13px !important; + font-weight: 500 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.has-images, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.is-dragging, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference:hover { + border-color: rgba(30, 189, 219, 0.42) !important; + color: #1073cc !important; + background: linear-gradient(180deg, rgba(254, 255, 255, 0.96), rgba(234, 250, 254, 0.9)) !important; +} + +/* Match the official OmniAI logo lockup on the local soft-white surface. */ +.ecommerce-standalone .ecommerce-standalone__brand { + gap: 10px !important; + min-height: 36px !important; + padding: 0 6px !important; + border-radius: 12px !important; + color: #10202c !important; + background: #f8f9fa !important; + box-shadow: inset 0 0 0 1px rgba(30, 189, 219, 0.08) !important; +} + +.ecommerce-standalone .ecommerce-standalone__brand strong { + color: #10202c !important; + font-size: 15px !important; + font-weight: 700 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo { + position: relative !important; + display: inline-flex !important; + flex: 0 0 28px !important; + align-items: center !important; + justify-content: center !important; + width: 28px !important; + height: 28px !important; + border-radius: 8px !important; + background: #f8f9fa !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo img { + display: block !important; + width: 28px !important; + height: 28px !important; + object-fit: contain !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo i, +.ecommerce-standalone .ecommerce-standalone__logo::before, +.ecommerce-standalone .ecommerce-standalone__logo::after { + content: none !important; + display: none !important; +} + +/* Language popover only: restore the compact inline language style. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + display: grid !important; + grid-template-columns: repeat(3, max-content) !important; + align-items: start !important; + gap: 8px !important; + width: max-content !important; + min-width: 0 !important; + max-width: min(680px, calc(100vw - 56px)) !important; + max-height: 122px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button { + display: inline-flex !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 5px !important; + width: max-content !important; + min-width: 0 !important; + max-width: none !important; + min-height: 34px !important; + padding: 0 12px !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button span { + display: inline !important; + width: auto !important; + min-width: 0 !important; + max-width: none !important; + overflow: visible !important; + line-height: 1 !important; + text-overflow: clip !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button strong { + color: #10202c !important; + font-size: 13px !important; + font-weight: 600 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button span { + color: #6b7c88 !important; + font-size: 12px !important; + font-weight: 500 !important; +} + +/* Settings popover: center non-set-mode option text only. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-levels button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-upload { + align-items: center !important; + justify-content: center !important; + justify-items: center !important; + text-align: center !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid button > strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid button > span, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-levels button > strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-levels button > span, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-upload > strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-upload > span { + width: 100% !important; + text-align: center !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings > .ecom-command-count-row, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings > .ecom-command-count-row * { + text-align: initial !important; +} + +/* Uploaded asset strip: no tinted background or divider line. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover { + border-bottom: 0 !important; + background: transparent !important; +} + +/* Command popovers must open below the composer; animation transforms should not control placement. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover { + top: calc(100% + 2px) !important; + bottom: auto !important; +} + +/* Generated workspace: compact composer, textured canvas, mouse-centered zoom and middle-button panning. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview { + grid-template-rows: auto minmax(0, 1fr) !important; + align-content: stretch !important; + gap: 14px !important; + overflow: auto !important; + cursor: default !important; + background: + radial-gradient(circle at 18% 18%, rgba(30, 189, 219, 0.08), transparent 24rem), + radial-gradient(circle at 82% 28%, rgba(16, 115, 204, 0.06), transparent 22rem), + linear-gradient(rgba(16, 115, 204, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.035) 1px, transparent 1px), + #f8f9fa !important; + background-size: auto, auto, 28px 28px, 28px 28px, auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview.is-middle-panning { + cursor: grabbing !important; + user-select: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview-zoom-wrap { + width: max-content !important; + min-width: 100% !important; + transform-origin: 0 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview-showcase, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-flow-pipeline, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-empty-state { + position: relative !important; + grid-row: 2 !important; + margin-top: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact { + gap: 0 !important; + cursor: text !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-title { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .clone-ai-input-wrapper.ecom-command-composer { + grid-template-rows: auto auto !important; + row-gap: 8px !important; + min-height: 92px !important; + padding: 12px 16px !important; + border-radius: 22px !important; + box-shadow: 0 14px 36px rgba(16, 115, 204, 0.1) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-asset-popover { + max-height: 42px !important; + overflow: hidden !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-composer textarea { + min-height: 34px !important; + max-height: 38px !important; + padding-top: 4px !important; + padding-bottom: 0 !important; + overflow: hidden !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-toolbar { + padding-top: 4px !important; + border-top: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button.is-active, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__item.is-active .ecom-command-history__item-main { + border-color: rgba(30, 189, 219, 0.42) !important; + background: rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__empty { + margin: 10px 8px 0 !important; + padding: 18px 12px !important; + border: 1px dashed rgba(30, 189, 219, 0.22) !important; + border-radius: 14px !important; + color: #7a8c98 !important; + background: rgba(248, 249, 250, 0.72) !important; + font-size: 13px !important; + font-weight: 500 !important; + text-align: center !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] { + padding-left: 0 !important; +} + +/* Final canvas alignment: keep the composer centered in the generation area and make middle-button panning visible. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview { + position: relative !important; + overflow: hidden !important; + padding-right: 0 !important; + padding-left: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap { + position: absolute !important; + left: 50% !important; + z-index: 12 !important; + width: min(1036px, calc(100% - 56px)) !important; + margin-right: 0 !important; + margin-left: 0 !important; +; + transition: top 520ms cubic-bezier(0.16, 1, 0.3, 1), + transform 520ms cubic-bezier(0.16, 1, 0.3, 1), + width 520ms cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-before-generate { + top: calc(50% - clamp(24px, 3.5vh, 36px)) !important; + transform: translate(-50%, -50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated { + top: 48px !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="done"] { + padding-top: 156px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="done"]:has(.ecom-command-composer-wrap:not(.is-compact)) { + padding-top: 360px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview-zoom-wrap { + display: inline-flex !important; + align-items: flex-start !important; + justify-content: center !important; + width: auto !important; + min-width: 100% !important; + transform-origin: 0 0 !important; + will-change: transform !important; + transition: transform 120ms ease-out !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview.is-middle-panning .clone-ai-preview-zoom-wrap { + transition: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview-showcase { + width: min(1120px, calc(100vw - 420px)) !important; + min-width: 980px !important; + margin-right: auto !important; + margin-left: auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-nodes { + position: relative; + width: max-content; + min-width: min(1120px, calc(100vw - 420px)); + min-height: 200px; + padding: 24px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node { + position: absolute; + top: 24px; + left: 24px; + display: flex; + align-items: center; + gap: 16px; + padding: 20px 24px; + padding-top: 36px; + border-radius: 18px; + border: 1px solid rgba(30, 189, 219, 0.18); + background: rgba(255, 255, 255, 0.96); + box-shadow: 0 4px 20px rgba(16, 115, 204, 0.08); + transition: box-shadow 200ms ease; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node:hover { + box-shadow: 0 8px 32px rgba(16, 115, 204, 0.14); +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-node-drag-handle { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 32px; + display: flex; + align-items: center; + justify-content: flex-end; + padding: 0 12px; + border-radius: 18px 18px 0 0; + cursor: grab; + user-select: none; + touch-action: none; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-node-drag-handle:active { + cursor: grabbing; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-main-result { + flex: 0 0 auto; + width: 150px; + border-radius: 12px; + overflow: hidden; + border: 1px solid rgba(30, 189, 219, 0.12); + cursor: pointer; + background: #f4f8fa; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-main-result img { + width: 100%; + height: auto; + display: block; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-main-result span { + display: block; + text-align: center; + font-size: 11px; + color: #68818f; + padding: 4px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-source-stack { + position: relative; + flex: 0 0 auto; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid { + display: flex; + gap: 12px; + flex-wrap: wrap; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-stack { + position: relative; + flex: 0 0 auto; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-source-corner-action { + position: absolute; + top: -6px; + left: 50%; + z-index: 5; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 24px; + padding: 4px 9px; + border: 1px solid rgba(30, 189, 219, 0.22); + border-radius: 999px; + background: rgba(255, 255, 255, 0.96); + box-shadow: 0 6px 18px rgba(16, 115, 204, 0.12); + color: #188ba7; + font-size: 11px; + font-weight: 700; + line-height: 1; + white-space: nowrap; + cursor: pointer; + transform: translate(-50%, -100%); +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-source-corner-action:hover { + border-color: rgba(30, 189, 219, 0.45); + color: #0f7895; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid button { + width: 140px; + border-radius: 12px; + overflow: hidden; + border: 1px solid rgba(30, 189, 219, 0.12); + background: #f4f8fa; + cursor: pointer; + transition: border-color 200ms; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid button:hover { + border-color: rgba(30, 189, 219, 0.4); +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid img { + width: 100%; + height: auto; + display: block; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid span { + display: block; + text-align: center; + font-size: 11px; + color: #68818f; + padding: 4px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-node-label { + font-size: 11px; + font-weight: 600; + color: rgba(30, 189, 219, 0.8); + background: rgba(30, 189, 219, 0.08); + padding: 2px 8px; + border-radius: 8px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-result-stack > .clone-ai-node-label { + position: absolute; + top: -6px; + left: 50%; + z-index: 5; + transform: translate(-50%, -100%); + white-space: nowrap; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-canvas-node.is-generating { + justify-content: center; + min-width: 200px; + min-height: 120px; + color: #68818f; + font-size: 14px; + gap: 10px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview { + cursor: grab; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview.is-middle-panning { + cursor: grabbing; +} + +/* History sidebar is an overlay drawer; do NOT shift the underlying content. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-empty-state, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-flow-pipeline { + transform: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview-zoom-wrap { + margin-left: 0 !important; +} + +/* Header polish: remove the logo frame trace and match credit/user pill surfaces. */ +.ecommerce-standalone .ecommerce-standalone__brand { + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo { + overflow: visible !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo img { + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecommerce-standalone__credits, +.ecommerce-standalone .ecommerce-profile-menu__trigger { + min-height: 42px !important; + border: 1px solid rgba(30, 189, 219, 0.18) !important; + border-radius: 15px !important; + color: #10202c !important; + background: #fbfdfe !important; + box-shadow: 0 10px 26px rgba(16, 115, 204, 0.06) !important; +} + +.ecommerce-standalone .ecommerce-standalone__credits { + padding: 0 14px !important; +} + +.ecommerce-standalone .ecommerce-profile-menu__trigger { + padding: 0 15px 0 7px !important; +} + +/* Compact generated composer: keep uploaded thumbnails visible and collapse the text band. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .clone-ai-input-wrapper.ecom-command-composer { + grid-template-rows: auto 24px auto !important; + row-gap: 6px !important; + min-height: 124px !important; + padding: 10px 16px 12px !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-asset-popover { + min-height: 56px !important; + max-height: 56px !important; + padding: 7px 12px 5px !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-asset-thumb { + width: 44px !important; + height: 44px !important; + border-radius: 10px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-asset-thumb img, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-asset-thumb video { + border-radius: 10px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-asset-thumb > button { + top: -4px !important; + right: -4px !important; + width: 18px !important; + height: 18px !important; + min-height: 18px !important; + font-size: 12px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-asset-add { + width: 42px !important; + height: 42px !important; + min-height: 42px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-composer textarea { + min-height: 22px !important; + max-height: 24px !important; + padding: 0 !important; + font-size: 14px !important; + line-height: 22px !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; +} + +/* Composer final pass: viewport-centered position, icon-only upload, platform marks, and language-only sizing. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap { + position: fixed !important; + left: 50vw !important; + right: auto !important; + width: min(1036px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-before-generate { + top: calc(50vh + 32px) !important; + transform: translate(-50%, -50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated { + top: 88px !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference--inline { + width: 34px !important; + min-width: 34px !important; + max-width: 34px !important; + padding: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference--inline strong { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference--inline span { + font-size: 20px !important; + font-weight: 600 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-platform-logo-mark { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + flex: 0 0 20px !important; + width: 20px !important; + height: 20px !important; + padding: 0 !important; + overflow: hidden !important; + border-radius: 6px !important; + color: inherit !important; + background: transparent !important; + box-shadow: none !important; + font-size: 0 !important; + font-style: normal !important; + font-weight: 800 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-platform-logo-mark--duo { + flex-basis: 42px !important; + width: 42px !important; + gap: 2px !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-platform-logo-mark img { + display: block !important; + width: 20px !important; + height: 20px !important; + flex: 0 0 20px !important; + object-fit: contain !important; + border-radius: 5px !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--platform button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button:has(.ecom-platform-logo-mark) { + display: inline-flex !important; + align-items: center !important; + gap: 6px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-platform-name { + display: inline !important; + width: auto !important; + max-width: none !important; + overflow: visible !important; + color: inherit !important; + text-overflow: clip !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + grid-template-columns: repeat(3, minmax(118px, 1fr)) !important; + width: min(520px, calc(100vw - 56px)) !important; + min-width: 0 !important; + max-width: min(520px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + align-content: center !important; + justify-items: center !important; + gap: 4px !important; + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + min-height: 52px !important; + padding: 8px 10px !important; + text-align: center !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button span { + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + overflow: hidden !important; + text-align: center !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +/* Restore composer scale: only center dynamically, do not enlarge the input or upload strip. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] { + --ecom-history-offset: 0px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed { + --ecom-history-offset: 0px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap { + position: absolute !important; + left: calc(50% + var(--ecom-history-offset)) !important; + right: auto !important; + bottom: auto !important; + height: auto !important; + width: min(1036px, calc(100% - 56px)) !important; + align-content: start !important; + grid-template-rows: auto auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-before-generate { + top: calc(50% - clamp(24px, 3.5vh, 36px)) !important; + transform: translate(-50%, -50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated { + top: 24px !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title { + font-size: clamp(28px, 2.7vw, 40px) !important; + line-height: 1.12 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + grid-template-rows: auto minmax(40px, auto) auto !important; + row-gap: 8px !important; + min-height: 184px !important; + padding: 14px 20px 14px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover { + min-height: 54px !important; + max-height: 62px !important; + padding: 6px 12px !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb { + width: 48px !important; + height: 48px !important; + border-radius: 10px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb img, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb video { + border-radius: 10px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb > button { + top: -5px !important; + right: -5px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-add { + width: 42px !important; + height: 42px !important; + min-height: 42px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover + textarea, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover ~ textarea, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea { + min-height: 42px !important; + max-height: 62px !important; + padding: 8px 0 6px !important; + font-size: 16px !important; + line-height: 24px !important; +} + +/* Size rollback: keep the previous compact composer proportions while preserving dynamic centering. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap { + gap: 18px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title { + max-width: 100% !important; + font-size: clamp(24px, 2.2vw, 32px) !important; + line-height: 1.15 !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + grid-template-rows: 54px 32px auto !important; + row-gap: 6px !important; + min-height: 164px !important; + padding: 12px 18px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover { + min-height: 54px !important; + max-height: 54px !important; + padding: 5px 10px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-thumb { + width: 44px !important; + height: 44px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-add { + width: 40px !important; + height: 40px !important; + min-height: 40px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover + textarea, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-asset-popover ~ textarea { + min-height: 32px !important; + max-height: 32px !important; + padding: 3px 0 0 !important; + line-height: 24px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar { + min-height: 42px !important; + padding-top: 4px !important; +} + +/* Hidden utility nodes must not create rows in the composer grid. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hidden-file { + position: absolute !important; + width: 1px !important; + height: 1px !important; + min-height: 0 !important; + overflow: hidden !important; + opacity: 0 !important; + pointer-events: none !important; + transform: translate(-9999px, -9999px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-char-count { + position: absolute !important; + right: 10px !important; + bottom: -18px !important; + height: auto !important; + margin: 0 !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title { + height: auto !important; + min-height: 0 !important; + max-height: 38px !important; + overflow: hidden !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + height: auto !important; + max-height: 190px !important; + align-content: start !important; +} + +/* Horizontal centering only: keep the original vertical placement and visual scale. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-before-generate { + top: clamp(44px, 4.6vh, 58px) !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title { + height: auto !important; + max-height: none !important; + overflow: visible !important; + font-size: clamp(30px, 3.3vw, 46px) !important; + line-height: 1.1 !important; + white-space: normal !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + grid-template-rows: minmax(92px, auto) auto !important; + min-height: 206px !important; + max-height: none !important; + padding: 18px 20px !important; + row-gap: 16px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board { + display: grid !important; + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + width: min(1036px, 100%) !important; + min-height: 148px !important; + overflow: hidden !important; + border: 1px solid rgba(30, 189, 219, 0.13) !important; + border-radius: 18px !important; + background: rgba(254, 255, 255, 0.92) !important; + box-shadow: 0 18px 42px rgba(16, 115, 204, 0.08) !important; + backdrop-filter: blur(14px) !important; + -webkit-backdrop-filter: blur(14px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button { + position: relative !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + gap: 9px !important; + min-width: 0 !important; + min-height: 74px !important; + padding: 14px 12px !important; + border: 0 !important; + border-radius: 0 !important; + color: #172636 !important; + background: transparent !important; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important; + cursor: default !important; + transition: background 0.22s ease, color 0.22s ease !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(6n + 1))::before { + position: absolute !important; + top: 14px !important; + bottom: 14px !important; + left: 0 !important; + width: 1px !important; + content: "" !important; + background: rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:nth-child(n + 7)::after { + position: absolute !important; + top: 0 !important; + left: 16px !important; + right: 16px !important; + height: 1px !important; + content: "" !important; + background: rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover { + color: #1073cc !important; + background: rgba(30, 189, 219, 0.09) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button span { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + flex: 0 0 auto !important; + width: 20px !important; + height: 20px !important; + color: currentColor !important; + font-size: 18px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button strong { + overflow: hidden !important; + color: currentColor !important; + font-size: 13px !important; + font-weight: 600 !important; + line-height: 1.2 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated .ecom-command-quick-board, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-compact .ecom-command-quick-board { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea { + grid-row: 1 / 3 !important; + min-height: 96px !important; + max-height: 183px !important; + padding: 10px 0 58px !important; + font-size: 14px !important; + line-height: 1.55 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-toolbar { + min-height: auto !important; + padding-top: 8px !important; +} + +/* Match the target top spacing. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-before-generate { + top: clamp(-28px, -1.6vh, -12px) !important; + transform: translateX(-50%) !important; +} + +/* Set-mode settings should read as a vertical category list. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-set { + grid-template-columns: minmax(0, 1fr) !important; + width: min(420px, calc(100vw - 56px)) !important; + max-width: min(420px, calc(100vw - 56px)) !important; + max-height: 360px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--settings.ecom-command-popover--settings-set:has(> .ecom-command-count-row) { + grid-template-columns: minmax(0, 1fr) !important; + width: min(420px, calc(100vw - 56px)) !important; + max-width: min(420px, calc(100vw - 56px)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-set > .ecom-command-count-row { + grid-column: 1 !important; + min-height: 64px !important; + padding: 10px 12px !important; +} + +/* Upload action: keep only a larger plus sign. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline { + width: 28px !important; + min-width: 28px !important; + max-width: 28px !important; + height: 34px !important; + min-height: 34px !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + color: #10202c !important; + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline:hover, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline.has-images, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline.is-dragging { + border: 0 !important; + color: #1073cc !important; + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline span { + font-size: 28px !important; + font-weight: 500 !important; + line-height: 1 !important; +} + +/* Platform popover: center short labels while allowing long labels to keep their natural width. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--platform button { + justify-content: center !important; + gap: 4px !important; + text-align: center !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--platform .ecom-platform-name { + text-align: center !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--platform .ecom-platform-logo-mark--duo { + flex-basis: 28px !important; + width: 28px !important; + gap: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--platform .ecom-platform-logo-mark--duo img + img { + margin-left: -12px !important; +} + +/* Uploaded state: place thumbnails at the upper-left and move the prompt below them. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + grid-template-rows: 99px minmax(44px, auto) auto !important; + row-gap: 8px !important; + min-height: 276px !important; + padding: 32px 20px 16px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + grid-row: 1 !important; + align-self: start !important; + display: flex !important; + align-items: flex-start !important; + justify-content: flex-start !important; + gap: 10px !important; + width: max-content !important; + max-width: 100% !important; + min-height: 82px !important; + max-height: 86px !important; + padding: 0 0 0 14px !important; + overflow: visible !important; + border: 0 !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex: 0 0 78px !important; + width: 78px !important; + height: 78px !important; + border-radius: 12px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb img, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb video { + border-radius: 12px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add { + flex: 0 0 44px !important; + width: 44px !important; + height: 44px !important; + min-height: 44px !important; + margin-top: 18px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + grid-row: 2 !important; + min-height: 44px !important; + max-height: 72px !important; + padding: 6px 0 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-toolbar { + grid-row: 3 !important; + min-height: 42px !important; + padding-top: 8px !important; +} + +/* Generated-state final guard: fixed positioning so the composer never goes behind the topbar. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated { + position: fixed !important; + top: calc(var(--ecommerce-topbar-height, 64px) + 10px) !important; + left: calc(50vw + var(--ecom-history-offset, 0px)) !important; + transform: translateX(-50%) !important; + z-index: 90 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact { + gap: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-title { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + grid-template-rows: 44px 22px 34px !important; + row-gap: 4px !important; + min-height: 118px !important; + max-height: 126px !important; + padding: 10px 18px 10px !important; + overflow: visible !important; + border-radius: 22px !important; + border: 1px solid rgba(30, 189, 219, 0.14) !important; + background: rgba(254, 255, 255, 0.94) !important; + box-shadow: + 0 8px 32px rgba(16, 115, 204, 0.07), + 0 2px 8px rgba(16, 115, 204, 0.04) !important; + backdrop-filter: blur(16px) !important; + -webkit-backdrop-filter: blur(16px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + grid-row: 1 !important; + min-height: 44px !important; + max-height: 44px !important; + padding: 0 !important; + overflow: visible !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex: 0 0 44px !important; + width: 44px !important; + height: 44px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-add, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add { + flex: 0 0 34px !important; + width: 34px !important; + height: 34px !important; + min-height: 34px !important; + margin-top: 5px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + grid-row: 2 !important; + min-height: 22px !important; + max-height: 22px !important; + padding: 0 !important; + overflow: hidden !important; + font-size: 14px !important; + line-height: 22px !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-toolbar, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-toolbar { + grid-row: 3 !important; + min-height: 34px !important; + padding-top: 2px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="done"] { + padding-top: 138px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="done"]:has(.ecom-command-composer-wrap:not(.is-compact)) { + padding-top: 320px !important; +} + +/* Generated composer top alignment: compensate preview padding so the box sits below the topbar. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="done"] .ecom-command-composer-wrap.has-generated { + top: calc(var(--ecommerce-topbar-height, 64px) + 10px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="done"]:has(.ecom-command-composer-wrap:not(.is-compact)) .ecom-command-composer-wrap.has-generated { + top: calc(var(--ecommerce-topbar-height, 64px) + 10px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history { + z-index: 80 !important; + pointer-events: auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button { + pointer-events: auto !important; +} + +/* Right generation history: explicit functional panel with a visible collapsed handle. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] { + --ecom-history-panel-width: 292px; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history { + position: fixed !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + z-index: 90 !important; + display: grid !important; + grid-template-rows: auto auto auto minmax(0, 1fr) !important; + width: var(--ecom-history-panel-width) !important; + overflow: visible !important; + border-left: 1px solid rgba(30, 189, 219, 0.18) !important; + background: rgba(254, 255, 255, 0.96) !important; + box-shadow: -18px 0 42px rgba(16, 115, 204, 0.08) !important; + backdrop-filter: blur(18px) !important; + -webkit-backdrop-filter: blur(18px) !important; + transform: translateX(0) !important; + transition: + transform 520ms cubic-bezier(0.16, 1, 0.3, 1), + box-shadow 360ms ease, + border-color 360ms ease !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history { + transform: translateX(100%) !important; + box-shadow: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__backdrop { + position: fixed !important; + inset: 0 !important; + z-index: 85 !important; + background: rgba(16, 38, 56, 0.28) !important; + backdrop-filter: blur(2px) !important; + -webkit-backdrop-filter: blur(2px) !important; + animation: ecommerce-soft-scrim-in 240ms ease-out both !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools { + display: grid !important; + grid-template-columns: 40px minmax(0, 1fr) 40px !important; + align-items: center !important; + gap: 8px !important; + padding: 12px 12px 10px !important; + border-bottom: 0 !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-width: 0 !important; + min-height: 38px !important; + height: 38px !important; + border: 1px solid rgba(30, 189, 219, 0.22) !important; + border-radius: 13px !important; + color: #10202c !important; + background: #f3f8fa !important; + box-shadow: none !important; + font-size: 14px !important; + font-weight: 600 !important; + cursor: pointer !important; + transition: + transform 180ms ease, + border-color 220ms ease, + background 220ms ease, + color 220ms ease !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools button:hover { + border-color: rgba(30, 189, 219, 0.5) !important; + color: #1073cc !important; + background: rgba(30, 189, 219, 0.1) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__toggle { + position: static !important; + width: 40px !important; + min-width: 40px !important; + padding: 0 !important; + font-size: 25px !important; + line-height: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__toggle { + position: absolute !important; + top: 50% !important; + left: -52px !important; + right: auto !important; + z-index: 100 !important; + width: 42px !important; + height: 42px !important; + min-height: 42px !important; + border-radius: 15px !important; + background: #feffff !important; + box-shadow: 0 16px 34px rgba(16, 115, 204, 0.14) !important; + transform: translateY(-50%) !important; + pointer-events: auto !important; + visibility: visible !important; + opacity: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__new, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__refresh, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__heading, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__refresh-note, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-collapsed .ecom-command-history__list { + opacity: 0 !important; + visibility: hidden !important; + pointer-events: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__new { + border-color: rgba(30, 189, 219, 0.46) !important; + color: #0f6678 !important; + background: rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__refresh { + font-size: 18px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__refresh.is-refreshing { + color: #1073cc !important; + background: rgba(30, 189, 219, 0.14) !important; + animation: ecom-history-refresh-spin 680ms linear infinite !important; + cursor: wait !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__refresh:disabled { + opacity: 0.78 !important; +} + +@keyframes ecom-history-refresh-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__heading { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 12px !important; + margin: 2px 12px 10px !important; + padding: 12px 12px !important; + border: 1px solid rgba(30, 189, 219, 0.14) !important; + border-radius: 14px !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__heading strong { + color: #10202c !important; + font-size: 14px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__heading span { + color: #68818f !important; + font-size: 12px !important; + font-weight: 500 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__refresh-note { + margin: -2px 12px 10px !important; + padding: 8px 10px !important; + border: 1px solid rgba(30, 189, 219, 0.18) !important; + border-radius: 12px !important; + color: #0f6678 !important; + background: rgba(30, 189, 219, 0.08) !important; + font-size: 12px !important; + font-weight: 500 !important; + text-align: center !important; + animation: ecommerce-soft-drop-in 260ms ease-out both !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list { + display: grid !important; + align-content: start !important; + gap: 8px !important; + min-height: 0 !important; + overflow: auto !important; + padding: 0 12px 18px !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button { + display: grid !important; + gap: 6px !important; + min-height: 66px !important; + padding: 12px 12px !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 14px !important; + color: #10202c !important; + background: #feffff !important; + box-shadow: 0 8px 20px rgba(16, 115, 204, 0.045) !important; + text-align: left !important; + cursor: pointer !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button:hover, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button.is-active { + border-color: rgba(30, 189, 219, 0.38) !important; + background: rgba(30, 189, 219, 0.1) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__item { + position: relative !important; + display: grid !important; + grid-template-columns: 1fr auto !important; + align-items: stretch !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-main { + grid-column: 1 / -1 !important; + grid-row: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete { + grid-column: 2 !important; + grid-row: 1 !important; + z-index: 2 !important; + align-self: center !important; + width: 28px !important; + height: 28px !important; + min-height: 28px !important; + margin-right: 6px !important; + padding: 0 !important; + border: none !important; + border-radius: 6px !important; + color: #99a8b2 !important; + background: rgba(255, 255, 255, 0.92) !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important; + font-size: 13px !important; + cursor: pointer !important; + opacity: 0 !important; + transition: opacity 160ms ease, color 120ms ease, background 120ms ease !important; + pointer-events: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__item:hover .ecom-command-history__item-delete { + opacity: 1 !important; + pointer-events: auto !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete:hover { + color: #ff4d4f !important; + background: rgba(255, 77, 79, 0.1) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__item.is-active .ecom-command-history__item-main { + border-color: rgba(30, 189, 219, 0.42) !important; + background: rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list strong { + display: block !important; + overflow: hidden !important; + color: #10202c !important; + font-size: 14px !important; + font-weight: 700 !important; + line-height: 1.35 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list span { + overflow: hidden !important; + color: #68818f !important; + font-size: 12px !important; + font-weight: 500 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__empty { + margin: 0 !important; + padding: 26px 12px !important; + border: 1px dashed rgba(30, 189, 219, 0.24) !important; + border-radius: 14px !important; + color: #68818f !important; + background: #f8f9fa !important; + font-size: 13px !important; + font-weight: 500 !important; + text-align: center !important; +} + +/* Platform menu: logos only appear in the popover, and the list opens fully without scrollbars. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform { + grid-template-columns: repeat(4, 132px) !important; + align-items: start !important; + justify-items: stretch !important; + gap: 10px !important; + width: max-content !important; + min-width: 0 !important; + max-width: calc(100vw - 96px) !important; + max-height: none !important; + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform button { + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + overflow: hidden !important; + justify-content: flex-start !important; + gap: 8px !important; + padding: 8px 10px !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark { + position: relative !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + flex: 0 0 30px !important; + width: 30px !important; + height: 30px !important; + padding: 0 !important; + border-radius: 9px !important; + overflow: visible !important; + color: #fff !important; + background: transparent !important; + box-shadow: 0 8px 18px rgba(16, 32, 44, 0.12) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--duo { + flex-basis: 45px !important; + width: 45px !important; + gap: 3px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark__tile { + position: relative !important; + display: inline-grid !important; + place-items: center !important; + width: 30px !important; + height: 30px !important; + border-radius: 9px !important; + color: #fff !important; + font-size: 14px !important; + font-weight: 900 !important; + line-height: 1 !important; + letter-spacing: 0 !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--duo .ecom-platform-logo-mark__tile { + width: 21px !important; + height: 30px !important; + border-radius: 8px !important; + font-size: 13px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark__tile--wide { + font-size: 11px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--taobao .ecom-platform-logo-mark__tile:first-child { + background: linear-gradient(135deg, #ff8a00, #ff4d00) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--taobao .ecom-platform-logo-mark__tile:last-child { + background: linear-gradient(135deg, #ff3d5f, #c9002b) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--jd .ecom-platform-logo-mark__tile { + background: linear-gradient(135deg, #f22735, #bd0016) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--pdd .ecom-platform-logo-mark__tile { + background: linear-gradient(135deg, #ff5b35, #e60012) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--douyin .ecom-platform-logo-mark__tile, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--tiktok .ecom-platform-logo-mark__tile { + background: #111318 !important; + text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--amazon .ecom-platform-logo-mark__tile { + align-items: start !important; + padding-top: 5px !important; + background: #18202a !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: 19px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--amazon::after { + content: "" !important; + position: absolute !important; + left: 8px !important; + right: 7px !important; + bottom: 7px !important; + height: 5px !important; + border-bottom: 2px solid #ff9900 !important; + border-radius: 0 0 999px 999px !important; + transform: rotate(-8deg) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--shopee .ecom-platform-logo-mark__tile { + background: linear-gradient(135deg, #ff7043, #ee4d2d) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--shopee::before { + content: "" !important; + position: absolute !important; + top: 5px !important; + left: 9px !important; + width: 12px !important; + height: 8px !important; + border: 2px solid rgba(255, 255, 255, 0.9) !important; + border-bottom: 0 !important; + border-radius: 999px 999px 0 0 !important; + z-index: 2 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--lazada .ecom-platform-logo-mark__tile { + background: linear-gradient(135deg, #2335d6, #8b2cff 48%, #ff7a00) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--instagram .ecom-platform-logo-mark__tile { + background: radial-gradient(circle at 28% 92%, #ffd86b 0 22%, transparent 23%), linear-gradient(135deg, #405de6, #833ab4 38%, #e1306c 68%, #fd1d1d 84%, #fcb045) !important; + font-size: 10px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--aliexpress .ecom-platform-logo-mark__tile { + background: linear-gradient(135deg, #ff4f1f, #d71920) !important; + font-size: 10px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--ebay .ecom-platform-logo-mark__tile { + background: #fff !important; + color: #1d60b8 !important; + text-shadow: 1px 0 #e53238, 2px 0 #f5af02, 3px 0 #86b817 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform .ecom-platform-logo-mark--default .ecom-platform-logo-mark__tile { + background: linear-gradient(135deg, #18b7d6, #1073cc) !important; +} + +/* Language menu: show all rows directly, no inner scrollbar. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + max-height: none !important; + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; + scrollbar-gutter: auto !important; +} + +/* Command menus: every option panel expands fully instead of using inner scrollbars. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--list, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--ratio, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--platform, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--settings, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-set, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.ecom-command-popover--settings-set, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--detail, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--model, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-module-grid--video, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-levels, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-hot-thumb-grid { + max-height: none !important; + overflow: visible !important; + overflow-x: visible !important; + overflow-y: visible !important; + scrollbar-gutter: auto !important; +} + +/* Soft premium motion: brand halo, credit shimmer, and active-tag glints. */ +.ecommerce-standalone .ecommerce-standalone__logo { + position: relative !important; + overflow: visible !important; + isolation: isolate !important; +} + +.ecommerce-standalone .ecommerce-standalone__logo::before { + position: absolute !important; + inset: -7px !important; + z-index: -1 !important; + display: block !important; + border-radius: 999px !important; + content: "" !important; + background: + radial-gradient(circle, rgba(30, 189, 219, 0.28), rgba(16, 115, 204, 0.12) 44%, transparent 70%) !important; + filter: blur(2px) !important; + opacity: 0.52 !important; + transform: scale(0.92) !important; + animation: ecom-brand-halo-breathe 4.8s ease-in-out infinite !important; +} + +.ecommerce-standalone .ecommerce-standalone__credits { + position: relative !important; + overflow: hidden !important; + isolation: isolate !important; +} + +.ecommerce-standalone .ecommerce-standalone__credits::after { + position: absolute !important; + top: -38% !important; + bottom: -38% !important; + left: -42% !important; + z-index: 1 !important; + width: 34% !important; + pointer-events: none !important; + content: "" !important; + background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.74) 48%, transparent 100%) !important; + transform: translateX(-160%) skewX(-18deg) !important; + animation: ecom-credit-shimmer 7.2s ease-in-out infinite !important; +} + +.ecommerce-standalone .ecommerce-standalone__credits > * { + position: relative !important; + z-index: 2 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button.is-active, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button.is-active, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button.is-active, +.ecommerce-standalone .product-clone-rail button.is-active, +.ecommerce-standalone .clone-ai-tag-group button.is-active, +.ecommerce-standalone .ecommerce-auth-modal__tabs button.is-active, +.ecommerce-standalone .ecommerce-auth-modal__methods button.is-active, +.ecommerce-standalone .local-profile-tabs button.is-active { + position: relative !important; + overflow: hidden !important; + isolation: isolate !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button.is-active::after, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button.is-active::after, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button.is-active::after, +.ecommerce-standalone .product-clone-rail button.is-active::after, +.ecommerce-standalone .clone-ai-tag-group button.is-active::after, +.ecommerce-standalone .ecommerce-auth-modal__tabs button.is-active::after, +.ecommerce-standalone .ecommerce-auth-modal__methods button.is-active::after, +.ecommerce-standalone .local-profile-tabs button.is-active::after { + position: absolute !important; + top: -45% !important; + bottom: -45% !important; + left: -46% !important; + z-index: 1 !important; + width: 28% !important; + pointer-events: none !important; + content: "" !important; + background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.72) 48%, transparent 100%) !important; + transform: translateX(-170%) skewX(-18deg) !important; + animation: ecom-active-tag-glint 5.6s ease-in-out infinite !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button.is-active > *, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover button.is-active > *, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button.is-active > *, +.ecommerce-standalone .product-clone-rail button.is-active > *, +.ecommerce-standalone .clone-ai-tag-group button.is-active > *, +.ecommerce-standalone .ecommerce-auth-modal__tabs button.is-active > *, +.ecommerce-standalone .ecommerce-auth-modal__methods button.is-active > *, +.ecommerce-standalone .local-profile-tabs button.is-active > * { + position: relative !important; + z-index: 2 !important; +} + +@keyframes ecom-brand-halo-breathe { + 0%, + 100% { + opacity: 0.42; + transform: scale(0.9); + } + 50% { + opacity: 0.78; + transform: scale(1.16); + } +} + +@keyframes ecom-credit-shimmer { + 0%, + 62% { + transform: translateX(-180%) skewX(-18deg); + } + 76%, + 100% { + transform: translateX(460%) skewX(-18deg); + } +} + +@keyframes ecom-active-tag-glint { + 0%, + 56% { + transform: translateX(-180%) skewX(-18deg); + } + 72%, + 100% { + transform: translateX(480%) skewX(-18deg); + } +} + +/* Model settings: expose model appearance controls inside the command popover. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-model { + grid-template-columns: repeat(3, minmax(138px, 1fr)) !important; + width: min(720px, calc(100vw - 56px)) !important; + max-width: min(720px, calc(100vw - 56px)) !important; + margin-left: -128px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-model header, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-text { + grid-column: 1 / -1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-model header { + order: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile { + order: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model { + order: 2 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile { + display: grid !important; + grid-template-columns: 1fr !important; + gap: 8px !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile__title { + grid-column: 1 / -1 !important; + color: #10202c !important; + font-size: 13px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile section { + display: grid !important; + grid-template-columns: 52px minmax(0, 1fr) !important; + align-items: center !important; + gap: 8px !important; + min-width: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile section > strong, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-text > strong { + color: #526f7e !important; + font-size: 12px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile section > div { + display: flex !important; + flex-wrap: wrap !important; + gap: 6px !important; + min-width: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-profile button { + width: auto !important; + min-width: 0 !important; + min-height: 32px !important; + padding: 6px 12px !important; + font-size: 12px !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-text { + display: grid !important; + gap: 7px !important; + padding: 0 !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-text > strong { + order: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-text > textarea { + order: 1 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-model-text textarea { + min-height: 58px !important; + resize: vertical !important; + border: 1px solid rgba(30, 189, 219, 0.22) !important; + border-radius: 13px !important; + padding: 10px 12px !important; + color: #122534 !important; + background: #f3f8fa !important; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important; + font-size: 13px !important; + font-weight: 500 !important; + line-height: 1.45 !important; +} + +/* Smart cutout quick tool: standalone upload and editor flow. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-smart-cutout-page { + display: block !important; + width: 100% !important; + min-width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + overflow: hidden !important; + background: #feffff !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-smart-cutout-page .product-clone-shell { + display: block !important; + width: 100% !important; + min-width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + padding: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-smart-cutout-page .product-clone-rail, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-smart-cutout-page .product-clone-panel, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-smart-cutout-page .clone-ai-settings-toggle, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-smart-cutout-page .ecom-command-history { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-smart-cutout-page .ecom-command-hidden-file { + position: absolute !important; + width: 1px !important; + height: 1px !important; + overflow: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} + +/* Product set quick tool: standalone task page. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page { + display: block !important; + overflow: hidden !important; + background: #f3f5f8 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .product-clone-shell { + display: block !important; + width: 100% !important; + height: 100% !important; + padding: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .product-clone-rail, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .product-clone-panel, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .clone-ai-settings-toggle, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-quick-set-page .ecom-command-history { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page { + display: block !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + overflow: hidden !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .product-clone-shell { + display: block !important; + width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + padding: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .product-clone-rail, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .product-clone-panel, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .clone-ai-settings-toggle, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-command-history { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page { + display: block !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + overflow: hidden !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .product-clone-shell { + display: block !important; + width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + padding: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .product-clone-rail, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .product-clone-panel, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .clone-ai-settings-toggle, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-command-history { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-watermark-page .ecom-command-hidden-file { + position: absolute !important; + width: 1px !important; + height: 1px !important; + overflow: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page { + display: block !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + overflow: hidden !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .product-clone-shell { + display: block !important; + width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + padding: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .product-clone-rail, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .product-clone-panel, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .clone-ai-settings-toggle, +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-command-history { + display: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-translate-page .ecom-command-hidden-file { + position: absolute !important; + width: 1px !important; + height: 1px !important; + overflow: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"].is-image-workbench-page .ecom-command-hidden-file { + position: absolute !important; + width: 1px !important; + height: 1px !important; + overflow: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} + + +/* ── Quick Page Sidebar — shared left nav for set / detail ── */ +.ecommerce-standalone .ecom-quick-page-wrap { + position: absolute !important; + inset: 0 !important; + display: flex !important; + min-height: 0 !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + gap: 4px !important; + flex: 0 0 88px !important; + width: 88px !important; + padding: 20px 10px !important; + border-right: 1px solid rgba(30, 189, 219, 0.1) !important; + background: + linear-gradient(180deg, + rgba(255, 255, 255, 0.96) 0%, + rgba(248, 250, 252, 0.94) 50%, + rgba(243, 247, 250, 0.92) 100%) !important; + backdrop-filter: blur(20px) !important; + -webkit-backdrop-filter: blur(20px) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button { + position: relative !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + gap: 4px !important; + width: 100% !important; + min-height: 66px !important; + padding: 10px 6px !important; + border: 0 !important; + border-radius: 12px !important; + background: transparent !important; + color: #7c8a96 !important; + font-size: 10px !important; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important; + font-weight: 500 !important; + letter-spacing: 0.01em !important; + line-height: 1.2 !important; + cursor: pointer !important; + transition: + background 0.22s cubic-bezier(0.16, 1, 0.3, 1), + color 0.22s cubic-bezier(0.16, 1, 0.3, 1), + transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), + box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button .anticon { + font-size: 22px !important; + transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button span:last-child { + display: block !important; + font-size: 10px !important; + font-weight: 500 !important; + letter-spacing: 0.02em !important; + line-height: 1.2 !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button:hover { + background: rgba(30, 189, 219, 0.07) !important; + color: #0d6bb8 !important; + transform: translateY(-1px) !important; + box-shadow: 0 4px 12px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button:hover .anticon { + transform: scale(1.08) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button:active { + transform: translateY(0) !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button.is-active { + background: + linear-gradient(135deg, + rgba(16, 115, 204, 0.12) 0%, + rgba(30, 189, 219, 0.08) 100%) !important; + color: #0d6bb8 !important; + font-weight: 700 !important; + box-shadow: + 0 2px 8px rgba(16, 115, 204, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button.is-active::before { + content: "" !important; + position: absolute !important; + left: 0 !important; + top: 14px !important; + bottom: 14px !important; + width: 3px !important; + border-radius: 0 3px 3px 0 !important; + background: + linear-gradient(180deg, + #1073cc 0%, + #1ebddb 100%) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button.is-active .anticon { + color: #1073cc !important; +} + +.ecommerce-standalone .ecom-quick-page-wrap > :not(.ecom-quick-page-sidebar) { + flex: 1 1 0% !important; + min-width: 0 !important; + min-height: 0 !important; +} + + +.ecommerce-standalone .ecom-image-workbench-page { + position: relative !important; + display: grid !important; + grid-template-columns: 350px minmax(0, 1fr) !important; + gap: 18px !important; + align-items: stretch !important; + width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + box-sizing: border-box !important; + padding: 18px !important; + color: #172636 !important; + background: + radial-gradient(circle at 54% 48%, rgba(30, 189, 219, 0.07), transparent 28rem), + #f8f9fa !important; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important; + animation: ecom-smart-page-enter 440ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-image-workbench-nav { + display: none !important; +} + +.ecommerce-standalone .ecom-image-workbench-nav button, +.ecommerce-standalone .ecom-image-workbench-url-row button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 7px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 10px !important; + color: #1073cc !important; + background: #ffffff !important; + box-shadow: 0 8px 20px rgba(16, 115, 204, 0.06) !important; + font-weight: 850 !important; + cursor: pointer !important; + transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; +} + +.ecommerce-standalone .ecom-image-workbench-nav button { + min-height: 32px !important; + padding: 0 14px !important; + font-size: 13px !important; +} + +.ecommerce-standalone .ecom-image-workbench-nav button:hover, +.ecommerce-standalone .ecom-image-workbench-url-row button:hover { + color: #ffffff !important; + background: #1073cc !important; + box-shadow: 0 12px 26px rgba(16, 115, 204, 0.18) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-image-workbench-side { + display: flex !important; + flex-direction: column !important; + gap: 12px !important; + height: 100% !important; + min-height: 0 !important; + padding: 18px 16px !important; + overflow: auto !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 14px !important; + background: + linear-gradient(180deg, rgba(16, 115, 204, 0.055), transparent 180px), + #ffffff !important; + box-shadow: 0 14px 34px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-image-workbench-panel-head { + flex: 0 0 auto !important; + margin-bottom: 4px !important; +} + +.ecommerce-standalone .ecom-image-workbench-intro { + margin: -2px 2px 2px !important; + color: #66798a !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.65 !important; +} + +.ecommerce-standalone .ecom-image-workbench-heading { + display: grid !important; + gap: 7px !important; + padding: 2px 2px 6px !important; +} + +.ecommerce-standalone .ecom-image-workbench-heading span { + width: fit-content !important; + padding: 3px 9px !important; + border-radius: 999px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 11px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-image-workbench-heading strong { + color: #172636 !important; + font-size: 22px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-image-workbench-heading p { + max-width: 286px !important; + margin: 0 !important; + color: #66798a !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.7 !important; +} + +.ecommerce-standalone .ecom-image-workbench-panel { + display: grid !important; + gap: 12px !important; + padding: 14px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 12px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent), + #ffffff !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 28px rgba(16, 115, 204, 0.035) !important; +} + +.ecommerce-standalone .ecom-image-workbench-panel header { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; +} + +.ecommerce-standalone .ecom-image-workbench-panel strong, +.ecommerce-standalone .ecom-image-workbench-upload strong { + color: #132435 !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-image-workbench-panel header span { + padding: 3px 9px !important; + border-radius: 999px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 11px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload { + position: relative !important; + display: grid !important; + grid-template-columns: 74px minmax(0, 1fr) !important; + align-items: center !important; + gap: 12px !important; + min-height: 104px !important; + padding: 12px !important; + border: 1px dashed rgba(30, 189, 219, 0.5) !important; + border-radius: 12px !important; + color: #607485 !important; + background: #fbfdff !important; + cursor: pointer !important; + transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload:not(.has-image) { + grid-template-columns: 1fr !important; + justify-items: center !important; + text-align: center !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload.is-dragging, +.ecommerce-standalone .ecom-image-workbench-upload:hover { + border-color: #1ebddb !important; + background: #f6fcff !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.12) !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload > .anticon { + color: #1ebddb !important; + font-size: 30px !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload figure { + width: 74px !important; + height: 74px !important; + margin: 0 !important; + overflow: hidden !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 10px !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload img { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload div { + display: grid !important; + gap: 8px !important; + min-width: 0 !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload div strong { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .ecom-image-workbench-upload span { + color: #627485 !important; + font-size: 12px !important; + font-weight: 750 !important; +} + +.ecommerce-standalone .ecom-image-workbench-remove { + position: absolute !important; + top: 8px !important; + right: 8px !important; + z-index: 2 !important; + display: inline-grid !important; + place-items: center !important; + width: 24px !important; + height: 24px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 50% !important; + color: #526474 !important; + background: rgba(255, 255, 255, 0.92) !important; + box-shadow: 0 6px 14px rgba(16, 115, 204, 0.12) !important; + font-size: 16px !important; + font-weight: 850 !important; + line-height: 1 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-image-workbench-url-row { + display: grid !important; + grid-template-columns: minmax(0, 1fr) 58px !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-image-workbench-url-row input, +.ecommerce-standalone .ecom-image-workbench-panel textarea { + width: 100% !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 9px !important; + color: #172636 !important; + background: #f8fafc !important; + outline: none !important; + font-size: 12px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-image-workbench-url-row input { + min-height: 36px !important; + padding: 0 12px !important; +} + +.ecommerce-standalone .ecom-image-workbench-url-row button { + min-height: 36px !important; + padding: 0 12px !important; + font-size: 12px !important; +} + +.ecommerce-standalone .ecom-image-workbench-panel textarea { + min-height: 112px !important; + padding: 12px !important; + resize: vertical !important; + line-height: 1.7 !important; +} + +.ecommerce-standalone .ecom-image-workbench-slider { + display: grid !important; + grid-template-columns: 44px minmax(0, 1fr) 44px !important; + align-items: center !important; + gap: 10px !important; + color: #526474 !important; + font-size: 12px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-image-workbench-slider input { + accent-color: #1ebddb !important; +} + +.ecommerce-standalone .ecom-image-workbench-slider em { + color: #738392 !important; + font-style: normal !important; + text-align: right !important; +} + +.ecommerce-standalone .ecom-image-workbench-clear { + min-height: 34px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 9px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 12px !important; + font-weight: 900 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-image-workbench-clear:disabled { + color: #9badba !important; + background: #f1f4f6 !important; + cursor: not-allowed !important; +} + +.ecommerce-standalone .ecom-image-workbench-ratios { + display: grid !important; + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + gap: 6px !important; + padding: 4px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 10px !important; + background: #f8fafc !important; +} + +.ecommerce-standalone .ecom-image-workbench-ratios button { + min-height: 30px !important; + border: 0 !important; + border-radius: 7px !important; + color: #526474 !important; + background: transparent !important; + font-size: 12px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-image-workbench-ratios button.is-active { + color: #1073cc !important; + background: #edf8ff !important; + box-shadow: inset 0 0 0 1px rgba(30, 189, 219, 0.22) !important; +} + +.ecommerce-standalone .ecom-image-workbench-primary { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 9px !important; + min-height: 48px !important; + width: 100% !important; + margin-top: 2px !important; + border: 0 !important; + border-radius: 13px !important; + color: #ffffff !important; + background: linear-gradient(135deg, #1073cc, #1ebddb) !important; + box-shadow: 0 18px 38px rgba(16, 115, 204, 0.24) !important; + font-size: 15px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-image-workbench-primary:disabled { + color: #8ea0ad !important; + background: #edf1f4 !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-image-workbench-stage { + display: grid !important; + place-items: stretch !important; + min-width: 0 !important; + min-height: 0 !important; + height: 100% !important; + padding: 0 !important; + overflow: hidden !important; + border: none !important; + border-radius: 0 !important; + background: #f8f9fa !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-image-workbench-canvas { + position: relative !important; + display: grid !important; + place-items: center !important; + width: 100% !important; + height: 100% !important; + min-height: 0 !important; + overflow: hidden !important; + border: 1px dashed rgba(30, 189, 219, 0.42) !important; + border-radius: 0 !important; + background: + radial-gradient(circle, rgba(30, 189, 219, 0.18) 1px, transparent 1px), + linear-gradient(90deg, rgba(30, 189, 219, 0.04), rgba(16, 115, 204, 0.02)) !important; + background-color: #fbfdff !important; + background-size: 18px 18px, 100% 100% !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-image-workbench-canvas.is-dragging, +.ecommerce-standalone .ecom-image-workbench-canvas:hover { + border-color: rgba(30, 189, 219, 0.58) !important; +} + +.ecommerce-standalone .ecom-image-workbench-empty { + display: grid !important; + place-items: center !important; + gap: 12px !important; + max-width: 460px !important; + text-align: center !important; +} + +.ecommerce-standalone .ecom-image-workbench-empty .anticon { + display: inline-grid !important; + place-items: center !important; + width: 56px !important; + height: 56px !important; + border-radius: 16px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 26px !important; +} + +.ecommerce-standalone .ecom-image-workbench-empty strong { + color: #172636 !important; + font-size: 18px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-image-workbench-empty span { + color: #66798a !important; + font-size: 12px !important; + font-weight: 750 !important; +} + +.ecommerce-standalone .ecom-image-workbench-preview { + position: relative !important; + display: grid !important; + place-items: center !important; + width: min(72%, 760px) !important; + max-height: 78vh !important; + padding: 18px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 16px !important; + background: #ffffff !important; + box-shadow: 0 16px 44px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-image-workbench-image-frame { + position: relative !important; + display: block !important; + justify-self: center !important; + width: fit-content !important; + height: fit-content !important; + max-width: 100% !important; + max-height: 68vh !important; + overflow: hidden !important; + border-radius: 12px !important; + cursor: crosshair !important; + line-height: 0 !important; + touch-action: none !important; + user-select: none !important; +} + +.ecommerce-standalone .ecom-image-workbench-image-frame img { + display: block !important; + max-width: 100% !important; + max-height: 68vh !important; + border-radius: 12px !important; + object-fit: contain !important; + user-select: none !important; + pointer-events: none !important; + -webkit-user-drag: none !important; +} + +.ecommerce-standalone .ecom-image-workbench-preview em { + position: absolute !important; + left: 18px !important; + top: 18px !important; + padding: 5px 11px !important; + border-radius: 999px !important; + color: #1073cc !important; + background: rgba(237, 248, 255, 0.92) !important; + font-size: 12px !important; + font-style: normal !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-image-workbench-brush { + position: absolute !important; + z-index: 4 !important; + display: none !important; + border: 2px solid rgba(30, 189, 219, 0.72) !important; + border-radius: 50% !important; + background: rgba(30, 189, 219, 0.16) !important; + box-shadow: 0 0 0 6px rgba(30, 189, 219, 0.08) !important; + transform: translate(-50%, -50%) !important; + pointer-events: none !important; +} + +.ecommerce-standalone .ecom-image-workbench-mask-layer { + position: absolute !important; + inset: 0 !important; + z-index: 3 !important; + width: 100% !important; + height: 100% !important; + overflow: hidden !important; + border-radius: 12px !important; + pointer-events: none !important; +} + +.ecommerce-standalone .ecom-image-workbench-result { + display: grid !important; + place-items: center !important; + gap: 16px !important; + width: 100% !important; +} + +.ecommerce-standalone .ecom-image-workbench-result img { + display: block !important; + max-width: 100% !important; + max-height: 60vh !important; + border-radius: 12px !important; + object-fit: contain !important; +} + +.ecommerce-standalone .ecom-image-workbench-generating { + position: relative !important; + display: grid !important; + place-items: center !important; + width: 100% !important; +} + +.ecommerce-standalone .ecom-watermark-page { + position: relative !important; + display: grid !important; + grid-template-columns: 350px minmax(0, 1fr) !important; + gap: 0 !important; + align-items: stretch !important; + width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + box-sizing: border-box !important; + padding: 0 !important; + color: #172636 !important; + background: #f8f9fa !important; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important; + animation: ecom-smart-page-enter 440ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-watermark-nav { + display: none !important; +} + +.ecommerce-standalone .ecom-watermark-nav button, +.ecommerce-standalone .ecom-watermark-url-row button, +.ecommerce-standalone .ecom-watermark-actions button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 7px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 10px !important; + color: #1073cc !important; + background: #ffffff !important; + box-shadow: 0 8px 20px rgba(16, 115, 204, 0.06) !important; + font-weight: 850 !important; + cursor: pointer !important; + transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; +} + +.ecommerce-standalone .ecom-watermark-nav button { + min-height: 32px !important; + padding: 0 14px !important; + font-size: 13px !important; +} + +.ecommerce-standalone .ecom-watermark-nav button:hover, +.ecommerce-standalone .ecom-watermark-url-row button:hover, +.ecommerce-standalone .ecom-watermark-actions button:hover:not(:disabled) { + color: #ffffff !important; + background: #1073cc !important; + box-shadow: 0 12px 26px rgba(16, 115, 204, 0.18) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-watermark-side { + display: flex !important; + flex-direction: column !important; + gap: 10px !important; + height: 100% !important; + min-height: 0 !important; + padding: 14px 16px !important; + overflow: auto !important; + border: none !important; + border-right: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 0 !important; + background: #ffffff !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-watermark-panel-head { + flex: 0 0 auto !important; + margin-bottom: 0 !important; +} + +.ecommerce-standalone .ecom-watermark-intro { + margin: 0 2px 0 !important; + color: #66798a !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.65 !important; +} + +.ecommerce-standalone .ecom-watermark-heading { + display: grid !important; + gap: 7px !important; + padding: 2px 2px 6px !important; +} + +.ecommerce-standalone .ecom-watermark-heading span { + width: fit-content !important; + padding: 3px 9px !important; + border-radius: 999px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 11px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-watermark-heading strong { + color: #172636 !important; + font-size: 22px !important; + font-weight: 950 !important; + letter-spacing: 0 !important; +} + +.ecommerce-standalone .ecom-watermark-heading p { + max-width: 280px !important; + margin: 0 !important; + color: #66798a !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.7 !important; +} + +.ecommerce-standalone .ecom-watermark-panel { + display: grid !important; + gap: 10px !important; + padding: 12px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 12px !important; + background: rgba(248, 252, 255, 0.6) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75) !important; +} + +.ecommerce-standalone .ecom-watermark-panel header { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; +} + +.ecommerce-standalone .ecom-watermark-panel strong, +.ecommerce-standalone .ecom-watermark-upload-card strong { + color: #132435 !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-watermark-panel header span { + padding: 3px 9px !important; + border-radius: 999px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 11px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card { + position: relative !important; + display: grid !important; + grid-template-columns: 68px minmax(0, 1fr) !important; + align-items: center !important; + gap: 12px !important; + min-height: 92px !important; + padding: 10px 12px !important; + border: 1px dashed rgba(30, 189, 219, 0.45) !important; + border-radius: 12px !important; + color: #607485 !important; + background: #fbfdff !important; + cursor: pointer !important; + transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; +} + +.ecommerce-standalone .ecom-watermark-remove { + position: absolute !important; + top: 8px !important; + right: 8px !important; + z-index: 2 !important; + display: inline-grid !important; + place-items: center !important; + width: 24px !important; + height: 24px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 50% !important; + color: #526474 !important; + background: rgba(255, 255, 255, 0.92) !important; + box-shadow: 0 6px 14px rgba(16, 115, 204, 0.12) !important; + font-size: 16px !important; + font-weight: 850 !important; + line-height: 1 !important; + cursor: pointer !important; + transition: color 160ms ease, border-color 160ms ease, background 160ms ease, transform 160ms ease !important; +} + +.ecommerce-standalone .ecom-watermark-remove:hover { + border-color: rgba(16, 115, 204, 0.38) !important; + color: #1073cc !important; + background: #edf8ff !important; + transform: scale(1.04) !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card:not(.has-image) { + grid-template-columns: 1fr !important; + justify-items: center !important; + text-align: center !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card.is-dragging, +.ecommerce-standalone .ecom-watermark-upload-card:hover { + border-color: #1ebddb !important; + background: #f6fcff !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.12) !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card > .anticon { + color: #1ebddb !important; + font-size: 30px !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card figure { + width: 68px !important; + height: 68px !important; + margin: 0 !important; + overflow: hidden !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 10px !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card img { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card div { + display: grid !important; + gap: 10px !important; + min-width: 0 !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card span, +.ecommerce-standalone .ecom-watermark-panel p { + margin: 0 !important; + color: #627485 !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.65 !important; +} + +.ecommerce-standalone .ecom-watermark-upload-card div strong { + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .ecom-watermark-url-row { + display: grid !important; + grid-template-columns: minmax(0, 1fr) 58px !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-watermark-url-row input { + min-height: 36px !important; + padding: 0 12px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 9px !important; + color: #172636 !important; + background: #f8fafc !important; + outline: none !important; + font-size: 12px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-watermark-url-row button { + min-height: 36px !important; + padding: 0 12px !important; + font-size: 12px !important; +} + +.ecommerce-standalone .ecom-watermark-primary { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 9px !important; + min-height: 44px !important; + width: 100% !important; + margin-top: auto !important; + border: 0 !important; + border-radius: 12px !important; + color: #ffffff !important; + background: linear-gradient(135deg, #1073cc, #1ebddb) !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.2) !important; + font-size: 14px !important; + font-weight: 950 !important; + cursor: pointer !important; + transition: box-shadow 180ms ease, transform 180ms ease !important; +} + +.ecommerce-standalone .ecom-watermark-primary:hover:not(:disabled) { + box-shadow: 0 16px 36px rgba(16, 115, 204, 0.28) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-watermark-primary:disabled { + color: #8ea0ad !important; + background: #edf1f4 !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-watermark-workspace { + display: grid !important; + place-items: stretch !important; + min-width: 0 !important; + min-height: 0 !important; + height: 100% !important; + padding: 0 !important; + overflow: hidden !important; + border: none !important; + border-radius: 0 !important; + background: #f8f9fa !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-watermark-dropzone { + display: grid !important; + place-items: center !important; + align-content: center !important; + gap: 12px !important; + width: 100% !important; + height: 100% !important; + min-height: 0 !important; + border: 1px dashed rgba(30, 189, 219, 0.42) !important; + border-radius: 0 !important; + color: #657686 !important; + background: #fbfdff !important; + text-align: center !important; + cursor: pointer !important; + transition: border-color 180ms ease, background 180ms ease, color 180ms ease !important; +} + +.ecommerce-standalone .ecom-watermark-dropzone:hover, +.ecommerce-standalone .ecom-watermark-dropzone.is-dragging { + border-color: rgba(30, 189, 219, 0.72) !important; + color: #1073cc !important; + background: #f6fcff !important; +} + +.ecommerce-standalone .ecom-watermark-dropzone .anticon { + display: inline-grid !important; + place-items: center !important; + width: 50px !important; + height: 50px !important; + border-radius: 14px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 24px !important; +} + +.ecommerce-standalone .ecom-watermark-dropzone strong { + color: #172636 !important; + font-size: 15px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-watermark-dropzone span { + max-width: 360px !important; + color: #71818e !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.6 !important; +} + +.ecommerce-standalone .ecom-watermark-grid { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 0 !important; + width: 100% !important; + height: 100% !important; + overflow: hidden !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 0 !important; + background: #ffffff !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card { + position: relative !important; + display: grid !important; + grid-template-rows: minmax(0, 1fr) auto !important; + align-items: center !important; + justify-items: center !important; + min-width: 0 !important; + min-height: 0 !important; + padding: 24px !important; + overflow: hidden !important; + border: 0 !important; + border-radius: 0 !important; + background: #ffffff !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card:first-child { + border-right: 1px solid rgba(16, 115, 204, 0.1) !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card > span { + position: absolute !important; + top: 14px !important; + left: 14px !important; + z-index: 2 !important; + padding: 4px 10px !important; + border-radius: 999px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 12px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card > img { + display: block !important; + max-width: 100% !important; + max-height: 70vh !important; + object-fit: contain !important; + border-radius: 10px !important; + box-shadow: 0 12px 30px rgba(16, 115, 204, 0.1) !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card .ecom-image-workbench-image-frame { + position: relative !important; + display: block !important; + width: fit-content !important; + max-width: 100% !important; + max-height: 70vh !important; + overflow: hidden !important; + border-radius: 10px !important; + box-shadow: 0 12px 30px rgba(16, 115, 204, 0.1) !important; + cursor: crosshair !important; + touch-action: none !important; + user-select: none !important; + line-height: 0 !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card .ecom-image-workbench-image-frame img { + display: block !important; + max-width: 100% !important; + max-height: 70vh !important; + object-fit: contain !important; + border-radius: 10px !important; + user-select: none !important; + pointer-events: none !important; + -webkit-user-drag: none !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card .ecom-image-workbench-mask-layer { + position: absolute !important; + inset: 0 !important; + z-index: 3 !important; + width: 100% !important; + height: 100% !important; + overflow: hidden !important; + border-radius: 10px !important; + pointer-events: none !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card .ecom-image-workbench-brush { + position: absolute !important; + z-index: 4 !important; + border: 2px solid rgba(30, 189, 219, 0.72) !important; + border-radius: 50% !important; + background: rgba(30, 189, 219, 0.16) !important; + box-shadow: 0 0 0 6px rgba(30, 189, 219, 0.08) !important; + transform: translate(-50%, -50%) !important; + pointer-events: none !important; +} + +.ecommerce-standalone .ecom-watermark-empty, +.ecommerce-standalone .ecom-watermark-processing { + display: grid !important; + place-items: center !important; + gap: 10px !important; + width: min(360px, 80%) !important; + min-height: 190px !important; + padding: 24px !important; + border: 1px dashed rgba(16, 115, 204, 0.16) !important; + border-radius: 16px !important; + color: #6b7e8d !important; + background: #fbfdff !important; + text-align: center !important; +} + +.ecommerce-standalone .ecom-watermark-empty .anticon, +.ecommerce-standalone .ecom-watermark-processing .anticon { + color: #1ebddb !important; + font-size: 30px !important; +} + +.ecommerce-standalone .ecom-watermark-empty strong, +.ecommerce-standalone .ecom-watermark-processing strong { + color: #172636 !important; + font-size: 16px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-watermark-empty em, +.ecommerce-standalone .ecom-watermark-processing em { + color: #71818e !important; + font-size: 12px !important; + font-style: normal !important; + font-weight: 750 !important; +} + +.ecommerce-standalone .ecom-watermark-zoom { + position: absolute !important; + top: 14px !important; + right: 14px !important; + display: inline-grid !important; + place-items: center !important; + width: 34px !important; + height: 34px !important; + border: 0 !important; + border-radius: 50% !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 17px !important; +} + +.ecommerce-standalone .ecom-watermark-actions { + display: flex !important; + justify-content: center !important; + gap: 14px !important; + width: 100% !important; + padding-top: 16px !important; +} + +.ecommerce-standalone .ecom-watermark-actions button { + min-width: 138px !important; + min-height: 44px !important; + padding: 0 18px !important; + color: #172636 !important; + font-size: 13px !important; +} + +.ecommerce-standalone .ecom-watermark-actions button:disabled { + opacity: 0.45 !important; + cursor: not-allowed !important; + transform: none !important; +} + +.ecommerce-standalone .ecom-translate-lang-panel header { + margin-bottom: 8px !important; +} + +.ecommerce-standalone .ecom-translate-lang-select { + display: block !important; + width: 100% !important; + height: 38px !important; + padding: 0 12px !important; + border: 1px solid #e0e6ed !important; + border-radius: 10px !important; + color: #172636 !important; + background: #ffffff !important; + font-size: 13px !important; + font-weight: 600 !important; + font-family: inherit !important; + cursor: pointer !important; + transition: border-color 180ms ease, box-shadow 180ms ease !important; + appearance: none !important; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%23596775' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; + background-repeat: no-repeat !important; + background-position: right 12px center !important; +} + +.ecommerce-standalone .ecom-translate-lang-select:focus { + border-color: #1073cc !important; + box-shadow: 0 0 0 3px rgba(16, 115, 204, 0.1) !important; + outline: none !important; +} + +.ecommerce-standalone .ecom-translate-lang-select:hover { + border-color: #1073cc !important; +} + +.ecommerce-standalone .ecom-quick-set-page { + position: relative !important; + display: grid !important; + grid-template-rows: 42px minmax(0, 1fr) !important; + width: 100% !important; + height: 100% !important; + min-height: 720px !important; + color: #111827 !important; + background: #f3f5f8 !important; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important; +} + +.ecommerce-standalone .ecom-quick-set-topbar { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 18px !important; + padding: 0 16px !important; + border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important; + background: rgba(255, 255, 255, 0.92) !important; +} + +.ecommerce-standalone .ecom-quick-set-brand, +.ecommerce-standalone .ecom-quick-set-actions { + display: flex !important; + align-items: center !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-brand > span { + display: inline-grid !important; + place-items: center !important; + width: 22px !important; + height: 22px !important; + border-radius: 7px !important; + color: #ffffff !important; + background: linear-gradient(135deg, #ff3366, #1ebddb 55%, #111827) !important; + font-size: 13px !important; +} + +.ecommerce-standalone .ecom-quick-set-brand strong { + font-size: 14px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-brand button, +.ecommerce-standalone .ecom-quick-set-actions button, +.ecommerce-standalone .ecom-quick-set-actions span { + min-height: 26px !important; + padding: 0 10px !important; + border: 0 !important; + border-radius: 7px !important; + color: #26323f !important; + background: #f4f6f8 !important; + font-size: 12px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-quick-set-actions button:first-child { + color: #9a5623 !important; + background: #ffe0c7 !important; +} + +.ecommerce-standalone .ecom-quick-set-actions i { + width: 26px !important; + height: 26px !important; + border-radius: 50% !important; + background: #d7dde4 !important; +} + +.ecommerce-standalone .ecom-quick-set-body { + display: grid !important; + grid-template-columns: 54px 322px minmax(0, 1fr) !important; + min-height: 0 !important; +} + +.ecommerce-standalone .ecom-quick-set-rail { + display: grid !important; + align-content: start !important; + gap: 16px !important; + padding: 14px 8px !important; + border-right: 1px solid rgba(15, 23, 42, 0.06) !important; + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-quick-set-rail button { + display: grid !important; + justify-items: center !important; + gap: 5px !important; + min-height: 48px !important; + border: 0 !important; + border-radius: 9px !important; + color: #2c3642 !important; + background: transparent !important; + font-size: 11px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-quick-set-rail button.is-active { + color: #1073cc !important; + background: #eef8ff !important; +} + +.ecommerce-standalone .ecom-quick-set-panel { + position: relative !important; + display: grid !important; + grid-template-rows: auto auto auto auto auto minmax(0, 1fr) !important; + gap: 14px !important; + padding: 18px 16px 70px !important; + border-right: 1px solid rgba(15, 23, 42, 0.06) !important; + background: #ffffff !important; + overflow-y: auto !important; +} + +.ecommerce-standalone .ecom-quick-set-panel section { + display: grid !important; + gap: 10px !important; +} + +.ecommerce-standalone .ecom-quick-set-panel strong, +.ecommerce-standalone .ecom-quick-set-section-head strong { + font-size: 13px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-upload { + display: grid !important; + place-items: center !important; + gap: 8px !important; + min-height: 84px !important; + border: 1px dashed rgba(16, 115, 204, 0.22) !important; + border-radius: 10px !important; + color: #5f6f7c !important; + background: #fbfdff !important; +} + +.ecommerce-standalone .ecom-quick-set-upload span { + padding: 7px 14px !important; + border-radius: 8px !important; + color: #344250 !important; + background: #f3f5f8 !important; + font-size: 13px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-upload em { + color: #a0a9b2 !important; + font-style: normal !important; + font-size: 12px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-quick-set-selects { + display: grid !important; + grid-template-columns: 1fr 1fr !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + min-height: 34px !important; + padding: 0 10px !important; + border: 0 !important; + border-radius: 8px !important; + background: #f3f5f8 !important; + font-size: 13px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-quick-set-section-head { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 10px !important; +} + +.ecommerce-standalone .ecom-quick-set-section-head button { + min-height: 26px !important; + padding: 0 10px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 999px !important; + color: #3386ef !important; + background: #f6fbff !important; + font-size: 12px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel textarea { + min-height: 102px !important; + resize: none !important; + padding: 12px !important; + border: 1px solid rgba(15, 23, 42, 0.08) !important; + border-radius: 10px !important; + color: #253443 !important; + background: #ffffff !important; + font-size: 12px !important; + font-weight: 700 !important; + line-height: 1.65 !important; + outline: none !important; +} + +.ecommerce-standalone .ecom-quick-set-config { + display: grid !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-config button { + display: grid !important; + grid-template-columns: minmax(0, 1fr) 18px !important; + gap: 4px 10px !important; + min-height: 58px !important; + padding: 12px !important; + border: 1px solid rgba(15, 23, 42, 0.08) !important; + border-radius: 10px !important; + color: #253443 !important; + background: #ffffff !important; + text-align: left !important; +} + +.ecommerce-standalone .ecom-quick-set-config button::after { + grid-row: 1 / span 2 !important; + grid-column: 2 !important; + align-self: center !important; + width: 14px !important; + height: 14px !important; + border: 1px solid #c9d3dc !important; + border-radius: 4px !important; + content: "" !important; +} + +.ecommerce-standalone .ecom-quick-set-config button.is-active::after { + border-color: #3386ef !important; + background: #3386ef !important; + box-shadow: inset 0 0 0 3px #ffffff !important; +} + +.ecommerce-standalone .ecom-quick-set-config button strong, +.ecommerce-standalone .ecom-quick-set-config button span { + grid-column: 1 !important; +} + +.ecommerce-standalone .ecom-quick-set-config button span { + color: #909aa5 !important; + font-size: 12px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-quick-set-analysis { + min-height: 34px !important; + border: 0 !important; + border-radius: 8px !important; + color: #7aa9f8 !important; + background: #f3f5f8 !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel footer { + position: absolute !important; + left: 16px !important; + right: 16px !important; + bottom: 16px !important; +} + +.ecommerce-standalone .ecom-quick-set-panel footer button { + width: 100% !important; + min-height: 38px !important; + border: 0 !important; + border-radius: 8px !important; + color: #ffffff !important; + background: #b8b8b8 !important; + font-size: 13px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-stage { + display: grid !important; + place-items: center !important; + padding: 42px 48px !important; + overflow: auto !important; +} + +.ecommerce-standalone .ecom-quick-set-hero { + display: grid !important; + justify-items: center !important; + gap: 22px !important; + width: min(720px, 100%) !important; +} + +.ecommerce-standalone .ecom-quick-set-hero h1 { + margin: 0 !important; + font-size: 30px !important; + font-weight: 950 !important; + letter-spacing: 0 !important; +} + +.ecommerce-standalone .ecom-quick-set-hero p { + margin: -8px 0 16px !important; + color: #6b7684 !important; + font-size: 14px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-quick-set-hero p span { + color: #3386ef !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-card { + display: grid !important; + grid-template-columns: 1.2fr 40px 1fr !important; + align-items: center !important; + gap: 18px !important; + width: 100% !important; + min-height: 300px !important; + padding: 22px !important; + border-radius: 18px !important; + background: #ffffff !important; + box-shadow: 0 20px 60px rgba(23, 31, 44, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-card figure { + position: relative !important; + margin: 0 !important; + overflow: hidden !important; + border-radius: 12px !important; + background: #f3f5f8 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-card figure span { + position: absolute !important; + top: 9px !important; + left: 10px !important; + z-index: 1 !important; + padding: 4px 9px !important; + border-radius: 999px !important; + color: #536171 !important; + background: rgba(255, 255, 255, 0.86) !important; + font-size: 11px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-card img { + display: block !important; + width: 100% !important; + height: 100% !important; + object-fit: cover !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-main { + height: 250px !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-arrow { + display: grid !important; + place-items: center !important; + width: 40px !important; + height: 40px !important; + border-radius: 50% !important; + color: #c8d1db !important; + font-size: 42px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-grid { + display: grid !important; + grid-template-columns: 1fr 1fr !important; + gap: 10px !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-grid figure { + height: 120px !important; +} + +.ecommerce-standalone .ecom-quick-set-help { + position: absolute !important; + right: 18px !important; + bottom: 18px !important; + width: 38px !important; + height: 38px !important; + border: 1px solid rgba(15, 23, 42, 0.08) !important; + border-radius: 50% !important; + color: #6b7280 !important; + background: #ffffff !important; + box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08) !important; + font-size: 20px !important; + font-weight: 900 !important; +} + +/* Localized product set workbench layout. */ +.ecommerce-standalone .ecom-quick-set-page { + grid-template-rows: minmax(0, 1fr) !important; + min-height: 100% !important; + color: #172636 !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: 440px minmax(0, 1fr) !important; + min-height: 0 !important; + transition: grid-template-columns 680ms cubic-bezier(0.22, 1, 0.36, 1) !important; +} + +.ecommerce-standalone .ecom-quick-set-page.is-panel-collapsed .ecom-quick-set-body { + grid-template-columns: 0 minmax(0, 1fr) !important; +} + +.ecommerce-standalone .ecom-quick-set-panel { + display: flex !important; + flex-direction: column !important; + gap: 14px !important; + padding: 16px 14px 86px !important; + border-right: 1px solid rgba(16, 115, 204, 0.08) !important; + background: #feffff !important; + box-shadow: 18px 0 46px rgba(16, 115, 204, 0.04) !important; + overflow-y: auto !important; + scrollbar-width: none !important; + -ms-overflow-style: none !important; + transform: translateX(0) !important; + opacity: 1 !important; + clip-path: inset(0 0 0 0 round 0) !important; + will-change: transform, opacity, clip-path !important; + transition: + transform 680ms cubic-bezier(0.22, 1, 0.36, 1), + opacity 360ms ease, + clip-path 680ms cubic-bezier(0.22, 1, 0.36, 1), + box-shadow 460ms ease, + border-color 460ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-panel > * { + transform: translateX(0) !important; + opacity: 1 !important; + transition: + transform 520ms cubic-bezier(0.22, 1, 0.36, 1), + opacity 300ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-page.is-panel-collapsed .ecom-quick-set-panel { + pointer-events: none !important; + opacity: 0 !important; + transform: translateX(-26px) scaleX(0.96) !important; + clip-path: inset(0 100% 0 0 round 0) !important; + box-shadow: none !important; + border-color: transparent !important; +} + +.ecommerce-standalone .ecom-quick-set-page.is-panel-collapsed .ecom-quick-set-panel > * { + transform: translateX(-18px) !important; + opacity: 0 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; + display: none !important; +} + +.ecommerce-standalone .ecom-quick-set-panel-head { + display: flex !important; + align-items: center !important; + gap: 10px !important; + min-height: 34px !important; +} + +.ecommerce-standalone .ecom-quick-set-back { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-width: 70px !important; + min-height: 32px !important; + padding: 0 13px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 11px !important; + color: #1073cc !important; + background: #ffffff !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.08) !important; + font-size: 13px !important; + font-weight: 700 !important; + white-space: nowrap !important; + cursor: pointer !important; + transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-back:hover { + color: #ffffff !important; + background: #1073cc !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.18) !important; +} + +.ecommerce-standalone .ecom-quick-set-panel-head span { + display: inline-grid !important; + place-items: center !important; + width: 25px !important; + height: 25px !important; + border-radius: 8px !important; + color: #ffffff !important; + background: linear-gradient(135deg, #1073cc, #1ebddb) !important; + font-size: 12px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-page-title { + margin-right: auto !important; + color: #10202c !important; + font-size: 17px !important; + font-weight: 950 !important; + letter-spacing: 0.02em !important; +} + +.ecommerce-standalone .ecom-quick-set-panel-head strong { + color: #132435 !important; + font-size: 15px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel section { + position: relative !important; + gap: 9px !important; + padding: 12px !important; + border: 1px solid rgba(16, 115, 204, 0.09) !important; + border-radius: 12px !important; + background: #ffffff !important; + box-shadow: 0 10px 26px rgba(16, 115, 204, 0.035) !important; +} + +.ecommerce-standalone .ecom-quick-set-panel section > strong { + display: inline-flex !important; + align-items: center !important; + gap: 7px !important; + color: #172636 !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-basic-section { + z-index: 12 !important; + overflow: visible !important; +} + +.ecommerce-standalone .ecom-quick-set-select-anchor { + position: relative !important; + z-index: 12 !important; + overflow: visible !important; +} + +.ecommerce-standalone .ecom-quick-set-upload { + display: grid !important; + place-items: center !important; + gap: 10px !important; + min-height: 126px !important; + padding: 18px 14px !important; + border: 1px dashed rgba(30, 189, 219, 0.42) !important; + border-radius: 0 !important; + color: #172636 !important; + background: #ffffff !important; + outline: none !important; + cursor: pointer !important; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important; + transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-upload.has-images { + min-height: 158px !important; + padding: 14px !important; +} + +.ecommerce-standalone .ecom-quick-set-upload:hover, +.ecommerce-standalone .ecom-quick-set-upload:focus-visible { + border-color: rgba(30, 189, 219, 0.76) !important; + background: #ffffff !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.1), 0 14px 34px rgba(16, 115, 204, 0.12) !important; +} + +.ecommerce-standalone .ecom-quick-set-upload > .anticon { + color: #1ebddb !important; + font-size: 24px !important; +} + +.ecommerce-standalone .ecom-quick-set-upload > span { + color: #253544 !important; + background: transparent !important; + font-size: 15px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-upload b { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 46px !important; + padding: 0 34px !important; + border-radius: 12px !important; + color: #ffffff !important; + background: linear-gradient(135deg, #1073cc, #1ebddb) !important; + box-shadow: 0 18px 42px rgba(16, 115, 204, 0.22) !important; + font-size: 16px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-upload em { + color: #71818e !important; + font-size: 13px !important; + font-style: normal !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs { + position: relative !important; + display: flex !important; + flex-wrap: wrap !important; + justify-content: center !important; + gap: 8px !important; + width: 100% !important; + max-width: 100% !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs figure { + position: relative !important; + width: 48px !important; + height: 48px !important; + margin: 0 !important; + overflow: visible !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 10px !important; + background: #f8f9fa !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs figure > img { + width: 100% !important; + height: 100% !important; + display: block !important; + object-fit: cover !important; + border-radius: 9px !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs button { + position: absolute !important; + top: -7px !important; + right: -7px !important; + z-index: 4 !important; + width: 18px !important; + height: 18px !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + padding: 0 !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 999px !important; + color: #344250 !important; + background: #ffffff !important; + box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16) !important; + font-size: 13px !important; + font-weight: 950 !important; + line-height: 1 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-quick-upload-zoom { + position: absolute !important; + left: calc(100% + 12px) !important; + top: 50% !important; + z-index: 80 !important; + width: 184px !important; + height: 184px !important; + display: block !important; + padding: 0 !important; + overflow: hidden !important; + border: 1px solid rgba(16, 115, 204, 0.16) !important; + border-radius: 14px !important; + background: #ffffff !important; + box-shadow: 0 22px 54px rgba(15, 23, 42, 0.22) !important; + opacity: 0 !important; + pointer-events: none !important; + transform: translate3d(8px, -50%, 0) scale(0.94) !important; + transition: opacity 180ms ease, transform 180ms ease !important; +} + +.ecommerce-standalone .ecom-quick-upload-zoom img { + width: 100% !important; + height: 100% !important; + display: block !important; + object-fit: contain !important; + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs figure:hover .ecom-quick-upload-zoom { + opacity: 1 !important; + transform: translate3d(0, -50%, 0) scale(1) !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs .ecom-command-asset-zoom { + position: absolute !important; + top: 50% !important; + left: calc(100% + 12px) !important; + z-index: 90 !important; + display: none !important; + width: min(320px, calc(100vw - 48px)) !important; + height: auto !important; + padding: 8px !important; + overflow: visible !important; + border: 1px solid rgba(30, 189, 219, 0.28) !important; + border-radius: 10px !important; + background: #feffff !important; + box-shadow: 0 18px 46px rgba(20, 80, 100, 0.18) !important; + opacity: 1 !important; + pointer-events: none !important; + transform: translateY(-50%) !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs .ecom-command-asset-thumb:hover .ecom-command-asset-zoom, +.ecommerce-standalone .ecom-quick-upload-thumbs .ecom-command-asset-thumb:focus-within .ecom-command-asset-zoom { + display: block !important; + animation: ecom-zoom-preview-in 150ms ease-out both !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs .ecom-command-asset-zoom img { + display: block !important; + width: 100% !important; + height: auto !important; + max-height: 360px !important; + border-radius: 6px !important; + object-fit: contain !important; + background: transparent !important; +} + +.ecommerce-standalone .ecom-quick-set-label { + color: #6c7b88 !important; + font-size: 12px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-quick-set-modes { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-modes button { + min-height: 33px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 9px !important; + color: #253544 !important; + background: #f8f9fa !important; + font-size: 13px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-set-modes button.is-active { + border-color: #1073cc !important; + color: #1073cc !important; + background: #edf8ff !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .ecom-quick-set-selects { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button { + display: grid !important; + grid-template-columns: minmax(0, 1fr) 16px !important; + grid-template-rows: auto auto !important; + align-items: center !important; + justify-content: initial !important; + column-gap: 6px !important; + row-gap: 3px !important; + min-height: 58px !important; + padding: 9px 10px !important; + border: 1px solid rgba(16, 115, 204, 0.08) !important; + border-radius: 9px !important; + background: #f8f9fa !important; + text-align: left !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button span { + display: block !important; + grid-column: 1 !important; + grid-row: 1 !important; + min-width: 0 !important; + color: #71818e !important; + font-size: 11px !important; + font-weight: 800 !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button strong { + display: block !important; + grid-column: 1 !important; + grid-row: 2 !important; + min-width: 0 !important; + margin-top: 0 !important; + overflow: hidden !important; + color: #172636 !important; + font-size: 13px !important; + font-weight: 950 !important; + line-height: 1.25 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button em { + align-self: center !important; + grid-column: 2 !important; + grid-row: 1 / 3 !important; + justify-self: end !important; + color: #82919e !important; + font-style: normal !important; + font-size: 12px !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button.is-active { + border-color: rgba(16, 115, 204, 0.36) !important; + background: #edf8ff !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .ecom-quick-set-dropdown { + position: absolute !important; + top: 66px !important; + left: 0 !important; + right: 0 !important; + z-index: 20 !important; + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 8px !important; + padding: 10px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 12px !important; + background: #feffff !important; + box-shadow: 0 16px 36px rgba(16, 115, 204, 0.12) !important; + transform-origin: top left !important; + will-change: opacity, transform, filter !important; + animation: ecomQuickDropdownIn 300ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-quick-set-dropdown--language, +.ecommerce-standalone .ecom-quick-set-dropdown--ratio { + top: 132px !important; +} + +.ecommerce-standalone .ecom-quick-set-dropdown.is-closing { + pointer-events: none !important; + animation: ecomQuickDropdownOut 420ms cubic-bezier(0.4, 0, 0.2, 1) both !important; +} + +.ecommerce-standalone .ecom-quick-set-dropdown button { + min-height: 32px !important; + padding: 0 10px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 8px !important; + color: #273849 !important; + background: #f8f9fa !important; + font-size: 12px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-quick-set-dropdown button.is-active { + border-color: #1073cc !important; + color: #1073cc !important; + background: #edf8ff !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-detail-types { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-detail-types button { + min-height: 34px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 9px !important; + color: #253544 !important; + background: #f8f9fa !important; + font-size: 13px !important; + font-weight: 900 !important; +} + +.ecommerce-standalone .ecom-quick-detail-types button.is-active { + border-color: #1073cc !important; + color: #1073cc !important; + background: #edf8ff !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.12) !important; +} + +.ecommerce-standalone .ecom-quick-detail-thumbs { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-detail-thumbs figure { + aspect-ratio: 1 / 1 !important; + margin: 0 !important; + overflow: hidden !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 9px !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .ecom-quick-detail-thumbs img { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 8px !important; + max-height: 430px !important; + overflow-y: auto !important; + padding-right: 4px !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.34) transparent !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules::-webkit-scrollbar { + width: 6px !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules::-webkit-scrollbar-track { + background: transparent !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules::-webkit-scrollbar-thumb { + border-radius: 999px !important; + background: rgba(16, 115, 204, 0.28) !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel { + overflow-y: auto !important; + padding-bottom: 16px !important; + scrollbar-width: auto !important; + scrollbar-color: rgba(16, 115, 204, 0.56) rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar { + display: block !important; + width: 14px !important; + height: 14px !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-track { + border-radius: 999px !important; + background: rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-thumb { + border: 3px solid rgba(248, 249, 250, 0.95) !important; + border-radius: 999px !important; + background: rgba(16, 115, 204, 0.56) !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-panel::-webkit-scrollbar-thumb:hover { + background: rgba(16, 115, 204, 0.72) !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-detail-modules { + max-height: none !important; + overflow: visible !important; + padding-right: 0 !important; + scrollbar-width: auto !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules button { + display: grid !important; + gap: 4px !important; + min-height: 58px !important; + padding: 9px 10px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 10px !important; + color: #172636 !important; + background: #f8f9fa !important; + text-align: left !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules button.is-active { + border-color: rgba(16, 115, 204, 0.48) !important; + background: #edf8ff !important; + box-shadow: inset 0 0 0 1px rgba(30, 189, 219, 0.08), 0 8px 18px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules strong { + color: #172636 !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-detail-modules span { + color: #738392 !important; + font-size: 11px !important; + font-weight: 750 !important; +} + +@keyframes ecomPopoverIn { + from { + opacity: 0; + transform: translateY(-6px) scale(0.98); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes ecomQuickDropdownIn { + from { + opacity: 0; + filter: blur(5px); + transform: translateY(-8px) scale(0.96); + } + 60% { + opacity: 1; + filter: blur(0); + transform: translateY(2px) scale(1.01); + } + to { + opacity: 1; + filter: blur(0); + transform: translateY(0) scale(1); + } +} + +@keyframes ecomQuickDropdownOut { + from { + opacity: 1; + filter: blur(0); + transform: translateY(0) scale(1); + } + to { + opacity: 0; + filter: blur(4px); + transform: translateY(-8px) scale(0.96); + } +} + +.ecommerce-standalone .ecom-quick-set-counts { + display: grid !important; + gap: 9px !important; +} + +.ecommerce-standalone .ecom-quick-set-counts article { + display: grid !important; + grid-template-columns: minmax(0, 1fr) auto !important; + align-items: center !important; + gap: 12px !important; + min-height: 58px !important; + padding: 10px !important; + border: 1px solid rgba(16, 115, 204, 0.08) !important; + border-radius: 10px !important; + background: #f8f9fa !important; +} + +.ecommerce-standalone .ecom-quick-set-counts article strong { + color: #172636 !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-counts article span { + display: block !important; + margin-top: 4px !important; + color: #738392 !important; + font-size: 12px !important; + font-weight: 750 !important; +} + +.ecommerce-standalone .ecom-quick-set-counts p { + display: inline-grid !important; + grid-template-columns: 26px 28px 26px !important; + align-items: center !important; + margin: 0 !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 9px !important; + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-quick-set-counts p button, +.ecommerce-standalone .ecom-quick-set-counts p b { + display: inline-grid !important; + place-items: center !important; + min-height: 28px !important; + border: 0 !important; + color: #1073cc !important; + background: transparent !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-primary { + position: absolute !important; + left: 14px !important; + right: 14px !important; + bottom: 14px !important; + min-height: 54px !important; + border: 0 !important; + border-radius: 13px !important; + color: #ffffff !important; + background: linear-gradient(135deg, #1073cc, #1ebddb) !important; + box-shadow: 0 16px 36px rgba(16, 115, 204, 0.2) !important; + font-size: 17px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-primary--cancel { + display: block !important; + position: static !important; + left: auto !important; + right: auto !important; + bottom: auto !important; + width: 100% !important; + margin-top: 8px !important; + min-height: 40px !important; + color: #ff4d4f !important; + background: rgba(255, 77, 79, 0.06) !important; + border: 1px solid rgba(255, 77, 79, 0.18) !important; + border-radius: 12px !important; + box-shadow: none !important; + font-size: 14px !important; + font-weight: 700 !important; + cursor: pointer !important; + transition: background 180ms ease, color 180ms ease, border-color 180ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-primary--cancel:hover { + color: #ffffff !important; + background: #ff4d4f !important; + border-color: #ff4d4f !important; +} + +.ecommerce-standalone .ecom-quick-set-primary:disabled { + color: #8fa1af !important; + background: #eef2f5 !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-set-page .ecom-quick-set-primary { + position: static !important; + left: auto !important; + right: auto !important; + bottom: auto !important; + width: 100% !important; + margin-top: auto !important; + flex: 0 0 auto !important; +} + +.ecommerce-standalone .ecom-quick-set-page .ecom-quick-set-panel { + overflow-y: auto !important; + padding-bottom: 16px !important; + scrollbar-width: auto !important; + scrollbar-color: rgba(16, 115, 204, 0.56) rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-page .ecom-quick-set-panel::-webkit-scrollbar { + display: block !important; + width: 14px !important; + height: 14px !important; +} + +.ecommerce-standalone .ecom-quick-set-page .ecom-quick-set-panel::-webkit-scrollbar-track { + border-radius: 999px !important; + background: rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-page .ecom-quick-set-panel::-webkit-scrollbar-thumb { + border: 3px solid rgba(248, 249, 250, 0.95) !important; + border-radius: 999px !important; + background: rgba(16, 115, 204, 0.56) !important; +} + +.ecommerce-standalone .ecom-quick-set-page .ecom-quick-set-panel::-webkit-scrollbar-thumb:hover { + background: rgba(16, 115, 204, 0.72) !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-primary { + position: static !important; + left: auto !important; + right: auto !important; + bottom: auto !important; + width: 100% !important; + margin-top: 2px !important; + flex: 0 0 auto !important; +} + +.ecommerce-standalone .ecom-quick-set-stage { + position: relative !important; + display: grid !important; + grid-template-rows: auto minmax(0, 1fr) auto !important; + gap: 18px !important; + place-items: stretch !important; + padding: 24px 34px !important; + background: + radial-gradient(circle at 52% 46%, rgba(30, 189, 219, 0.07), transparent 26rem), + #f8f9fa !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head { + display: grid !important; + gap: 8px !important; + justify-items: start !important; + padding-bottom: 18px !important; + border-bottom: 1px solid rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head h1 { + margin: 0 !important; + color: #172636 !important; + font-size: 21px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head p { + margin: 0 !important; + color: #657686 !important; + font-size: 13px !important; + font-weight: 750 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head p span { + color: #1073cc !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head div { + display: inline-flex !important; + align-items: center !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head div button { + width: 24px !important; + height: 24px !important; + border: 0 !important; + border-radius: 7px !important; + color: #1073cc !important; + background: #edf8ff !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-canvas { + display: grid !important; + place-items: center !important; + min-height: 340px !important; +} + +.ecommerce-standalone .ecom-quick-set-empty { + display: grid !important; + place-items: center !important; + gap: 12px !important; + width: min(480px, 76%) !important; + min-height: 200px !important; + padding: 28px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 18px !important; + color: #738392 !important; + background: #ffffff !important; + box-shadow: 0 18px 48px rgba(16, 115, 204, 0.06) !important; + text-align: center !important; +} + +.ecommerce-standalone .ecom-quick-set-empty .anticon { + display: inline-grid !important; + place-items: center !important; + width: 58px !important; + height: 58px !important; + border-radius: 50% !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 26px !important; +} + +.ecommerce-standalone .ecom-quick-set-empty strong { + color: #172636 !important; + font-size: 19px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-generating, +.ecommerce-standalone .ecom-quick-set-failed { + display: grid !important; + place-items: center !important; + gap: 12px !important; + width: min(480px, 76%) !important; + min-height: 200px !important; + padding: 28px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 18px !important; + color: #738392 !important; + background: #ffffff !important; + box-shadow: 0 18px 48px rgba(16, 115, 204, 0.06) !important; + text-align: center !important; +} + +.ecommerce-standalone .ecom-quick-set-generating .anticon { + display: inline-grid !important; + place-items: center !important; + width: 58px !important; + height: 58px !important; + border-radius: 50% !important; + color: #1073cc !important; + background: #edf8ff !important; + font-size: 26px !important; + animation: spin 1s linear infinite !important; +} + +.ecommerce-standalone .ecom-quick-set-generating strong { + color: #172636 !important; + font-size: 19px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-generating span { + color: #738392 !important; + font-size: 13px !important; + line-height: 1.5 !important; +} + +.ecommerce-standalone .ecom-quick-set-progress { + width: 100% !important; + max-width: 320px !important; + height: 6px !important; + border-radius: 3px !important; + background: #e8eef4 !important; + overflow: hidden !important; +} + +.ecommerce-standalone .ecom-quick-set-progress-bar { + height: 100% !important; + border-radius: 3px !important; + background: linear-gradient(90deg, #1073cc, #38bdf8) !important; + transition: width 500ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-progress-text { + color: #1073cc !important; + font-size: 13px !important; + font-weight: 700 !important; + font-style: normal !important; +} + +.ecommerce-standalone .ecom-quick-set-failed .anticon { + display: inline-grid !important; + place-items: center !important; + width: 58px !important; + height: 58px !important; + border-radius: 50% !important; + color: #e04545 !important; + background: #fff0f0 !important; + font-size: 26px !important; +} + +.ecommerce-standalone .ecom-quick-set-failed strong { + color: #172636 !important; + font-size: 19px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-failed span { + color: #738392 !important; + font-size: 13px !important; + line-height: 1.5 !important; +} + +.ecommerce-standalone .ecom-quick-set-failed button { + min-height: 36px !important; + padding: 0 20px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 10px !important; + color: #1073cc !important; + background: #ffffff !important; + font-size: 13px !important; + font-weight: 700 !important; + cursor: pointer !important; + transition: background 180ms ease, color 180ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-failed button:hover:not(:disabled) { + color: #ffffff !important; + background: #1073cc !important; +} + +.ecommerce-standalone .ecom-quick-set-failed button:disabled { + opacity: 0.45 !important; + cursor: not-allowed !important; +} + +@keyframes spin { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.ecommerce-standalone .ecom-quick-set-result-card { + display: grid !important; + grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; + gap: 16px !important; + width: min(760px, 92%) !important; + padding: 18px !important; + border: 1px solid rgba(16, 115, 204, 0.08) !important; + border-radius: 18px !important; + background: #ffffff !important; + box-shadow: 0 20px 56px rgba(16, 115, 204, 0.08) !important; + transform-origin: center !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card figure { + position: relative !important; + margin: 0 !important; + overflow: hidden !important; + border-radius: 12px !important; + background: #f3f6f8 !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card figure img { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card > figure { + min-height: 280px !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card > div { + display: grid !important; + grid-template-columns: 1fr 1fr !important; + gap: 10px !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card > div figure { + min-height: 134px !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card figure span { + position: absolute !important; + top: 9px !important; + left: 9px !important; + padding: 4px 9px !important; + border-radius: 999px !important; + color: #435566 !important; + background: rgba(255, 255, 255, 0.86) !important; + font-size: 11px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-detail-preview-card { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 12px !important; + width: min(620px, 88%) !important; + padding: 16px !important; + border: 1px solid rgba(16, 115, 204, 0.08) !important; + border-radius: 18px !important; + background: #ffffff !important; + box-shadow: 0 20px 56px rgba(16, 115, 204, 0.08) !important; + transform-origin: center !important; +} + +.ecommerce-standalone .ecom-quick-detail-preview-card figure, +.ecommerce-standalone .ecom-quick-detail-result { + position: relative !important; + margin: 0 !important; + overflow: hidden !important; + border-radius: 12px !important; + background: #f3f6f8 !important; +} + +.ecommerce-standalone .ecom-quick-detail-preview-card figure { + min-height: 150px !important; +} + +.ecommerce-standalone .ecom-quick-detail-preview-card img, +.ecommerce-standalone .ecom-quick-detail-result img { + width: 100% !important; + height: 100% !important; + object-fit: cover !important; +} + +.ecommerce-standalone .ecom-quick-detail-preview-card span { + position: absolute !important; + top: 9px !important; + left: 9px !important; + padding: 4px 9px !important; + border-radius: 999px !important; + color: #435566 !important; + background: rgba(255, 255, 255, 0.86) !important; + font-size: 11px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-detail-result { + width: min(520px, 80%) !important; + min-height: 620px !important; + border: 1px solid rgba(16, 115, 204, 0.08) !important; + box-shadow: 0 20px 56px rgba(16, 115, 204, 0.08) !important; + transform-origin: center !important; +} + +.ecommerce-standalone .ecom-quick-detail-download { + position: absolute !important; + bottom: 16px !important; + right: 16px !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 7px !important; + min-height: 36px !important; + padding: 0 16px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 10px !important; + color: #1073cc !important; + background: rgba(255, 255, 255, 0.92) !important; + backdrop-filter: blur(6px) !important; + box-shadow: 0 8px 20px rgba(16, 115, 204, 0.06) !important; + font-size: 13px !important; + font-weight: 850 !important; + cursor: pointer !important; + transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; +} + +.ecommerce-standalone .ecom-quick-detail-download:hover { + color: #ffffff !important; + background: #1073cc !important; + box-shadow: 0 12px 26px rgba(16, 115, 204, 0.18) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-quick-detail-download:active { + transform: scale(0.96) !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt { + position: relative !important; + display: grid !important; + grid-template-columns: minmax(0, 1fr) 40px !important; + align-items: end !important; + gap: 12px !important; + min-height: 92px !important; + padding: 14px 15px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 17px !important; + background: #ffffff !important; + box-shadow: 0 14px 36px rgba(16, 115, 204, 0.05) !important; +} + +.ecommerce-standalone .ecom-quick-detail-page .ecom-quick-set-prompt { + grid-template-columns: minmax(0, 1fr) auto !important; +} + +.ecommerce-standalone .ecom-quick-detail-prompt-actions { + display: inline-flex !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt textarea { + min-height: 62px !important; + resize: none !important; + border: 0 !important; + outline: none !important; + color: #172636 !important; + background: transparent !important; + font-size: 13px !important; + font-weight: 750 !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt button { + width: 40px !important; + height: 40px !important; + border: 0 !important; + border-radius: 50% !important; + color: #ffffff !important; + background: #1073cc !important; + font-size: 18px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt button:disabled { + color: #8fa1af !important; + background: #eef2f5 !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt span { + position: absolute !important; + right: 14px !important; + bottom: -22px !important; + color: #71818e !important; + font-size: 12px !important; + font-weight: 850 !important; +} + +.ecommerce-standalone .ecom-quick-set-collapse { + display: none !important; +} + +.ecommerce-standalone .ecom-quick-set-collapse:hover { + border-color: rgba(30, 189, 219, 0.5) !important; + color: #1073cc !important; + background: rgba(30, 189, 219, 0.1) !important; + transform: translateY(-50%) translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-quick-set-page.is-panel-collapsed .ecom-quick-set-collapse { + left: 12px !important; +} + +.ecommerce-standalone .ecom-smart-cutout-page { + position: relative !important; + width: 100% !important; + min-width: 100% !important; + height: 100% !important; + min-height: calc(100vh - 58px) !important; + overflow: auto !important; + color: #111820 !important; + background: #feffff !important; + font-family: "PingFang SC", "Microsoft YaHei", sans-serif !important; + animation: ecom-smart-page-enter 440ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-smart-cutout-nav { + position: sticky !important; + top: 18px !important; + left: 24px !important; + z-index: 12 !important; + display: inline-flex !important; + align-items: center !important; + gap: 10px !important; + margin: 18px 0 -52px 24px !important; + padding: 6px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 15px !important; + background: rgba(254, 255, 255, 0.86) !important; + box-shadow: 0 14px 34px rgba(16, 115, 204, 0.08) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-nav button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-width: 70px !important; + min-height: 32px !important; + padding: 0 13px !important; + border: 0 !important; + border-radius: 11px !important; + color: #1073cc !important; + background: transparent !important; + font-size: 13px !important; + font-weight: 700 !important; + cursor: pointer !important; + transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease !important; +} + +.ecommerce-standalone .ecom-smart-cutout-nav button:hover { + color: #ffffff !important; + background: #1073cc !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.18) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-transition, +.ecommerce-standalone .ecom-quick-page-transition { + position: fixed !important; + inset: 64px 0 0 !important; + z-index: 30 !important; + display: grid !important; + place-content: center !important; + justify-items: center !important; + gap: 10px !important; + color: #10202c !important; + background: rgba(248, 253, 255, 0.82) !important; + backdrop-filter: blur(18px) !important; + -webkit-backdrop-filter: blur(18px) !important; + animation: ecom-smart-transition-in 260ms ease both !important; +} + +.ecommerce-standalone .ecom-smart-cutout-transition span, +.ecommerce-standalone .ecom-quick-page-transition span { + width: 56px !important; + height: 56px !important; + border: 4px solid rgba(30, 189, 219, 0.16) !important; + border-top-color: #1ebddb !important; + border-radius: 50% !important; + box-shadow: 0 12px 30px rgba(30, 189, 219, 0.18) !important; + animation: ecom-smart-transition-spin 860ms linear infinite !important; +} + +.ecommerce-standalone .ecom-smart-cutout-transition strong, +.ecommerce-standalone .ecom-quick-page-transition strong { + margin-top: 8px !important; + color: #10202c !important; + font-size: 20px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-cutout-transition em, +.ecommerce-standalone .ecom-quick-page-transition em { + color: #6d7d88 !important; + font-size: 13px !important; + font-style: normal !important; + font-weight: 600 !important; +} + +.ecommerce-standalone .ecom-smart-cutout-page.is-transitioning .ecom-smart-cutout-upload, +.ecommerce-standalone .ecom-smart-cutout-page.is-transitioning .ecom-smart-editor { + pointer-events: none !important; + animation: ecom-smart-page-hold 620ms ease both !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload { + position: relative !important; + display: grid !important; + align-content: center !important; + justify-items: center !important; + gap: 28px !important; + min-height: calc(100vh - 64px) !important; + padding: 72px 32px 96px !important; + animation: ecom-smart-upload-enter 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-smart-cutout-head { + display: grid !important; + gap: 10px !important; + text-align: center !important; +} + +.ecommerce-standalone .ecom-smart-cutout-head strong { + color: #101820 !important; + font-size: 34px !important; + font-weight: 800 !important; + line-height: 1.15 !important; + letter-spacing: 0 !important; +} + +.ecommerce-standalone .ecom-smart-cutout-head span { + color: #6f7e89 !important; + font-size: 15px !important; + font-weight: 500 !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload__body { + display: grid !important; + grid-template-columns: minmax(280px, 360px) minmax(360px, 520px) !important; + gap: 32px !important; + align-items: stretch !important; + width: min(930px, 100%) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 20px !important; + padding: 28px !important; + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 20px !important; + background: #ffffff !important; + box-shadow: 0 18px 46px rgba(16, 115, 204, 0.07) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile { + position: relative !important; + min-height: 130px !important; + overflow: hidden !important; + border-radius: 18px !important; + background: #f3f8fa !important; + box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.06), 0 12px 24px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile::before, +.ecommerce-standalone .ecom-smart-cutout-demo__tile::after { + position: absolute !important; + content: "" !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--flower { + background: + radial-gradient(circle at 52% 38%, #fff9c8 0 9px, transparent 10px), + radial-gradient(circle at 43% 44%, #f25f7a 0 7px, transparent 8px), + radial-gradient(circle at 61% 48%, #ff9f43 0 8px, transparent 9px), + linear-gradient(135deg, #c9a16d, #6a4622) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--flower::before { + left: 50% !important; + bottom: 18px !important; + width: 52px !important; + height: 58px !important; + border-radius: 12px 12px 20px 20px !important; + background: rgba(255, 255, 255, 0.6) !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--product { + background: + radial-gradient(circle at 50% 34%, #ffffff 0 28px, transparent 29px), + linear-gradient(135deg, #f2f5f7, #6f7680) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--product::before { + left: 50% !important; + bottom: 18px !important; + width: 74px !important; + height: 52px !important; + border-radius: 20px 20px 26px 26px !important; + background: linear-gradient(135deg, #37424e, #d5dde4) !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--poster { + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--poster::before { + inset: 24px 18px !important; + border-radius: 10px !important; + background: + radial-gradient(circle at 38% 48%, rgba(235, 81, 116, 0.42) 0 24px, transparent 25px), + linear-gradient(12deg, transparent 0 42%, #1073cc 43% 47%, transparent 48%), + linear-gradient(0deg, #f2f7fb 0 100%) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--object { + background: linear-gradient(135deg, #f2eee8, #c7b6a0) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--object::before { + left: 50% !important; + top: 30px !important; + width: 70px !important; + height: 70px !important; + border: 9px solid #f7fafc !important; + border-radius: 50% !important; + background: repeating-conic-gradient(from 0deg, #d7dee4 0 8deg, #ffffff 9deg 16deg) !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-demo__tile--object::after { + left: 50% !important; + bottom: 18px !important; + width: 42px !important; + height: 48px !important; + border-radius: 12px !important; + background: #f8fbfd !important; + transform: translateX(-50%) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload-box { + display: grid !important; + align-content: center !important; + justify-items: center !important; + gap: 12px !important; + min-height: 360px !important; + padding: 36px !important; + border: 1.5px dashed rgba(16, 115, 204, 0.46) !important; + border-radius: 20px !important; + background: #ffffff !important; + cursor: pointer !important; + transition: border-color 240ms ease, box-shadow 240ms ease, transform 240ms ease, background 240ms ease !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload-box:hover, +.ecommerce-standalone .ecom-smart-cutout-upload-box.is-dragging { + border-color: #1ebddb !important; + background: #f8fdff !important; + box-shadow: 0 18px 46px rgba(30, 189, 219, 0.12) !important; + transform: translateY(-2px) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload-box button { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 8px !important; + width: 190px !important; + min-height: 42px !important; + border-radius: 9px !important; + font-size: 14px !important; + font-weight: 700 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload__primary { + border: 0 !important; + color: #ffffff !important; + background: #1073cc !important; + box-shadow: 0 10px 22px rgba(16, 115, 204, 0.2) !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload__secondary { + border: 1px solid rgba(16, 115, 204, 0.16) !important; + color: #253544 !important; + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload-box > span { + margin-top: 2px !important; + color: #6b7b86 !important; + font-size: 13px !important; + font-weight: 600 !important; +} + +.ecommerce-standalone .ecom-smart-cutout-back { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 34px !important; + padding: 0 14px !important; + border: 1px solid rgba(16, 115, 204, 0.14) !important; + border-radius: 12px !important; + color: #1073cc !important; + background: #f4fbfd !important; + font-size: 13px !important; + font-weight: 700 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-smart-cutout-upload > .ecom-smart-cutout-back { + position: absolute !important; + top: 22px !important; + left: 28px !important; +} + +.ecommerce-standalone .ecom-smart-editor { + display: grid !important; + grid-template-columns: minmax(0, 1fr) 300px !important; + gap: 32px !important; + width: min(1120px, calc(100% - 64px)) !important; + min-height: calc(100vh - 64px) !important; + margin: 0 auto !important; + padding: 22px 0 60px !important; + animation: ecom-smart-editor-enter 520ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-smart-editor__workspace { + display: grid !important; + grid-template-rows: auto auto auto !important; + gap: 14px !important; + min-width: 0 !important; +} + +.ecommerce-standalone .ecom-smart-editor__canvas { + position: relative !important; + display: grid !important; + place-items: center !important; + min-height: 430px !important; + overflow: hidden !important; + background: #e8edf3 !important; +} + +.ecommerce-standalone .ecom-smart-editor__checker { + position: relative !important; + display: grid !important; + place-items: center !important; + width: var(--smart-cutout-frame-width, min(520px, 78%)) !important; + min-height: 430px !important; + aspect-ratio: var(--smart-cutout-frame-aspect, auto) !important; + overflow: hidden !important; + background: transparent !important; + transition: width 220ms ease, aspect-ratio 220ms ease, min-height 220ms ease !important; +} + +.ecommerce-standalone .ecom-smart-editor__background-layer { + position: absolute !important; + inset: 0 !important; + z-index: 0 !important; + background: var(--smart-cutout-bg, #ffffff) !important; + transition: background-color 180ms ease, background 180ms ease !important; +} + +.ecommerce-standalone .ecom-smart-editor__checker:not(.is-size-original):not(.is-size-trim) { + min-height: 0 !important; +} + +.ecommerce-standalone .ecom-smart-editor__checker.is-size-trim { + min-height: 320px !important; + padding: 18px !important; +} + +.ecommerce-standalone .ecom-smart-editor__checker img { + position: relative !important; + z-index: 1 !important; + display: block !important; + max-width: var(--smart-cutout-image-max-width, 78%) !important; + max-height: var(--smart-cutout-image-max-height, 310px) !important; + object-fit: contain !important; + filter: drop-shadow(0 16px 24px rgba(17, 24, 32, 0.14)) !important; + transition: max-width 220ms ease, max-height 220ms ease !important; +} + +.ecommerce-standalone .ecom-smart-editor__canvas-actions { + position: absolute !important; + top: 20px !important; + right: 18px !important; + display: flex !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-smart-editor__canvas-actions button { + min-height: 34px !important; + padding: 0 12px !important; + border: 0 !important; + border-radius: 9px !important; + color: #1e2d38 !important; + background: rgba(255, 255, 255, 0.9) !important; + font-size: 13px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools-shell { + display: grid !important; + grid-template-columns: 24px minmax(0, 1fr) 24px !important; + grid-template-rows: auto auto !important; + align-items: start !important; + gap: 6px 5px !important; + height: auto !important; + overflow: visible !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools-title { + grid-column: 1 / -1 !important; + color: #1c2a35 !important; + font-size: 16px !important; + font-weight: 800 !important; + line-height: 1.15 !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools { + display: flex !important; + align-items: start !important; + gap: 5px !important; + min-width: 0 !important; + height: auto !important; + overflow-x: auto !important; + overflow-y: visible !important; + scroll-behavior: smooth !important; + scrollbar-width: none !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools::-webkit-scrollbar { + display: none !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools-nav { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 24px !important; + height: 100px !important; + min-width: 24px !important; + min-height: 100px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 7px !important; + color: #1073cc !important; + background: #f8fdff !important; + box-shadow: 0 6px 14px rgba(16, 115, 204, 0.06) !important; + font-size: 17px !important; + font-weight: 800 !important; + line-height: 1 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools-nav:hover { + border-color: #1ebddb !important; + background: #effbfe !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools button { + flex: 0 0 100px !important; + width: 100px !important; + height: 100px !important; + display: inline-grid !important; + place-items: center !important; + min-height: 100px !important; + padding: 10px 8px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 7px !important; + color: #2d3d48 !important; + background: #f2f5f7 !important; + font-size: 9px !important; + font-weight: 700 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-item { + flex: 0 0 100px !important; + display: grid !important; + gap: 6px !important; + justify-items: center !important; + width: 100px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tools button.is-active { + border-color: #1073cc !important; + color: #1073cc !important; + background: #f8fdff !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.16) !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-text { + display: grid !important; + gap: 2px !important; + justify-items: center !important; + max-width: 100% !important; + text-align: center !important; + line-height: 1.18 !important; + color: #2d3d48 !important; + font-size: 10px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-text > span { + max-width: 100% !important; + overflow: hidden !important; + text-overflow: ellipsis !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-text > span:first-child { + display: -webkit-box !important; + -webkit-box-orient: vertical !important; + -webkit-line-clamp: 2 !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-text > span:last-child:not(:first-child) { + font-size: 9px !important; + font-weight: 800 !important; + color: #6a7c88 !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon { + position: relative !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 24px !important; + height: 24px !important; + color: currentColor !important; + transform: scale(0.72) !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon::before { + display: block !important; + border: 2px solid currentColor !important; + border-radius: 5px !important; + content: "" !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--image::before { + width: 20px !important; + height: 16px !important; + border-radius: 4px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--image::after { + position: absolute !important; + left: 6px !important; + bottom: 6px !important; + width: 12px !important; + height: 7px !important; + border-radius: 2px 2px 4px 4px !important; + background: linear-gradient(135deg, transparent 0 45%, currentColor 46% 54%, transparent 55%) !important; + content: "" !important; + opacity: 0.8 !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--crop::before { + width: 18px !important; + height: 18px !important; + border-radius: 3px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--crop::after { + position: absolute !important; + width: 22px !important; + height: 22px !important; + border-top: 2px solid currentColor !important; + border-left: 2px solid currentColor !important; + content: "" !important; + transform: translate(2px, 2px) rotate(-45deg) scale(0.55) !important; + opacity: 0.9 !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--shop::before, +.ecommerce-standalone .ecom-smart-editor__tool-icon--pdd::before { + width: 18px !important; + height: 18px !important; + border-radius: 4px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--shop::after, +.ecommerce-standalone .ecom-smart-editor__tool-icon--pdd::after { + position: absolute !important; + right: 2px !important; + bottom: 2px !important; + color: currentColor !important; + font-size: 8px !important; + font-weight: 900 !important; + content: "淘" !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--pdd::after { + content: "拼" !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--text::before { + width: 19px !important; + height: 14px !important; + border-radius: 4px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--text::after { + position: absolute !important; + color: currentColor !important; + font-size: 8px !important; + font-weight: 900 !important; + content: "小红书" !important; + transform: scale(0.72) !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--portrait::before, +.ecommerce-standalone .ecom-smart-editor__tool-icon--portrait-ratio::before, +.ecommerce-standalone .ecom-smart-editor__tool-icon--phone::before { + width: 12px !important; + height: 20px !important; + border-radius: 5px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--square::before { + width: 17px !important; + height: 17px !important; + border-radius: 5px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--landscape::before { + width: 20px !important; + height: 13px !important; + border-radius: 5px !important; +} + +.ecommerce-standalone .ecom-smart-editor__tool-icon--wide::before { + width: 22px !important; + height: 10px !important; + border-radius: 5px !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch { + display: grid !important; + gap: 10px !important; + min-width: 0 !important; + padding: 12px !important; + border: 1px solid rgba(30, 189, 219, 0.14) !important; + border-radius: 12px !important; + background: rgba(248, 253, 255, 0.82) !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch header { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 12px !important; + color: #172636 !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch header strong { + font-size: 14px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch header span { + color: #6e8290 !important; + font-size: 12px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch > div { + display: flex !important; + gap: 10px !important; + min-width: 0 !important; + overflow-x: auto !important; + padding-bottom: 2px !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch button { + position: relative !important; + flex: 0 0 74px !important; + width: 74px !important; + height: 74px !important; + overflow: hidden !important; + border: 2px solid transparent !important; + border-radius: 12px !important; + background: #ffffff !important; + cursor: pointer !important; + box-shadow: 0 10px 22px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch button.is-active { + border-color: #1073cc !important; + box-shadow: 0 12px 26px rgba(16, 115, 204, 0.16) !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch button img { + display: block !important; + width: 100% !important; + height: 100% !important; + object-fit: cover !important; +} + +.ecommerce-standalone .ecom-smart-editor__batch button span { + position: absolute !important; + right: 5px !important; + bottom: 5px !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-width: 20px !important; + height: 20px !important; + padding: 0 6px !important; + border-radius: 999px !important; + color: #ffffff !important; + background: rgba(16, 115, 204, 0.88) !important; + font-size: 11px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__gallery { + display: grid !important; + gap: 14px !important; +} + +.ecommerce-standalone .ecom-smart-editor__gallery header { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + color: #1c2a35 !important; +} + +.ecommerce-standalone .ecom-smart-editor__gallery header strong { + font-size: 16px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__gallery header button { + border: 0 !important; + color: #9aa6ad !important; + background: transparent !important; + font-size: 13px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-smart-editor__swatches, +.ecommerce-standalone .ecom-smart-editor__scenes { + display: grid !important; + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + gap: 10px !important; +} + +.ecommerce-standalone .ecom-smart-editor__swatches button, +.ecommerce-standalone .ecom-smart-editor__scenes button { + position: relative !important; + min-height: 118px !important; + overflow: hidden !important; + border: 1px solid rgba(16, 115, 204, 0.08) !important; + border-radius: 8px !important; + color: #20313e !important; + background: #f3f8fa !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-smart-editor__swatches button { + background: var(--smart-cutout-swatch-bg, #ffffff) !important; +} + +.ecommerce-standalone .ecom-smart-editor__swatch-bg { + position: absolute !important; + inset: 0 !important; + z-index: 0 !important; + border-radius: inherit !important; + background: var(--smart-cutout-swatch-bg, #ffffff) !important; + box-shadow: inset 0 0 0 1px rgba(16, 115, 204, 0.06) !important; +} + +.ecommerce-standalone .ecom-smart-editor__swatches button img { + position: absolute !important; + left: 50% !important; + top: 50% !important; + z-index: 1 !important; + width: 46% !important; + height: 58% !important; + object-fit: contain !important; + transform: translate(-50%, -50%) !important; + filter: drop-shadow(0 10px 16px rgba(17, 24, 32, 0.12)) !important; +} + +.ecommerce-standalone .ecom-smart-editor__swatches button.is-active { + border-color: #1073cc !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.16) !important; +} + +.ecommerce-standalone .ecom-smart-editor__generate { + display: grid !important; + place-items: center !important; + color: #5f83ff !important; + font-size: 20px !important; + font-weight: 800 !important; + background: linear-gradient(135deg, #eefcff, #fff5ff) !important; +} + +.ecommerce-standalone .ecom-smart-editor__scenes button:not(.ecom-smart-editor__generate) { + background: + radial-gradient(circle at 22% 18%, rgba(30, 189, 219, 0.2), transparent 34%), + linear-gradient(135deg, #eef4f7, #d9e1e7) !important; +} + +.ecommerce-standalone .ecom-smart-editor__scenes button span { + position: absolute !important; + left: 10px !important; + bottom: 9px !important; + color: #243542 !important; + font-size: 12px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__side { + position: sticky !important; + top: 20px !important; + align-self: start !important; + display: grid !important; + gap: 18px !important; + padding: 10px 0 !important; + color: #1c2a35 !important; +} + +.ecommerce-standalone .ecom-smart-editor__side > strong { + font-size: 15px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__color-row { + display: flex !important; + flex-wrap: wrap !important; + gap: 9px !important; +} + +.ecommerce-standalone .ecom-smart-editor__color-row button, +.ecommerce-standalone .ecom-smart-editor__custom-color { + position: relative !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 44px !important; + height: 44px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 7px !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-smart-editor__color-wrap { + position: relative !important; + display: inline-flex !important; +} + +.ecommerce-standalone .ecom-smart-editor__color-row button.is-active, +.ecommerce-standalone .ecom-smart-editor__custom-color.is-active, +.ecommerce-standalone .ecom-smart-editor__custom-color:focus-visible { + border-color: #1073cc !important; + box-shadow: 0 0 0 3px rgba(30, 189, 219, 0.16) !important; +} + +.ecommerce-standalone .ecom-smart-editor__custom-color { + overflow: hidden !important; + color: #ffffff !important; + font-size: 12px !important; + font-weight: 800 !important; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.32) !important; +} + +.ecommerce-standalone .ecom-smart-editor__custom-color::before { + position: absolute !important; + inset: 0 !important; + content: "" !important; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.48), transparent 42%), + linear-gradient(135deg, transparent, rgba(0, 0, 0, 0.18)) !important; +} + +.ecommerce-standalone .ecom-smart-editor__custom-color span { + position: relative !important; + z-index: 1 !important; + pointer-events: none !important; +} + +.ecommerce-standalone .ecom-smart-color-picker { + position: absolute !important; + top: -6px !important; + left: calc(100% + 12px) !important; + z-index: 80 !important; + display: grid !important; + gap: 10px !important; + width: 266px !important; + padding: 14px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 14px !important; + background: #ffffff !important; + box-shadow: 0 22px 52px rgba(18, 34, 48, 0.16) !important; + animation: ecommerce-soft-popover-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-smart-color-picker::after { + position: absolute !important; + top: 22px !important; + left: -7px !important; + width: 14px !important; + height: 14px !important; + border-top: 1px solid rgba(16, 115, 204, 0.12) !important; + border-left: 1px solid rgba(16, 115, 204, 0.12) !important; + border-right: 0 !important; + background: #ffffff !important; + content: "" !important; + transform: rotate(-45deg) !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__plane { + position: relative !important; + width: 100% !important; + height: 140px !important; + overflow: hidden !important; + border: 0 !important; + border-radius: 10px !important; + cursor: crosshair !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__plane span { + position: absolute !important; + width: 13px !important; + height: 13px !important; + border: 2px solid #ffffff !important; + border-radius: 50% !important; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.36) !important; + transform: translate(-50%, -50%) !important; + pointer-events: none !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__slider { + position: relative !important; + display: grid !important; + grid-template-columns: 26px minmax(0, 1fr) !important; + align-items: center !important; + gap: 8px !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__slider > span { + width: 24px !important; + height: 24px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 7px !important; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42) !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__slider input { + width: 100% !important; + height: 16px !important; + margin: 0 !important; + padding: 0 !important; + border: 0 !important; + border-radius: 999px !important; + appearance: none !important; + cursor: pointer !important; + accent-color: #1073cc !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__slider--hue input { + background: linear-gradient(90deg, #ff2b2b, #ffed00, #1dd85b, #18c8ff, #2f55ff, #b12bff, #ff2b2b) !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__slider--alpha input { + background: + linear-gradient(45deg, #d8dde1 25%, transparent 25%), + linear-gradient(-45deg, #d8dde1 25%, transparent 25%), + linear-gradient(45deg, transparent 75%, #d8dde1 75%), + linear-gradient(-45deg, transparent 75%, #d8dde1 75%), + linear-gradient(90deg, transparent, var(--smart-cutout-bg, #ffffff)) !important; + background-position: 0 0, 0 8px, 8px -8px, -8px 0, 0 0 !important; + background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 100% 100% !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__slider input::-webkit-slider-thumb { + width: 14px !important; + height: 14px !important; + border: 2px solid #ffffff !important; + border-radius: 50% !important; + background: #ffffff !important; + appearance: none !important; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.24) !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__slider input::-moz-range-thumb { + width: 14px !important; + height: 14px !important; + border: 2px solid #ffffff !important; + border-radius: 50% !important; + background: #ffffff !important; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.24) !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__fields { + display: grid !important; + grid-template-columns: 1fr 1.4fr 56px 28px !important; + gap: 8px !important; + align-items: center !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__fields span, +.ecommerce-standalone .ecom-smart-color-picker__fields input, +.ecommerce-standalone .ecom-smart-color-picker__fields strong { + min-width: 0 !important; + height: 30px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 7px !important; + color: #5b6b76 !important; + background: #ffffff !important; + font-size: 12px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__fields span, +.ecommerce-standalone .ecom-smart-color-picker__fields strong { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__fields input { + width: 100% !important; + padding: 0 8px !important; + outline: none !important; +} + +.ecommerce-standalone .ecom-smart-color-picker p { + margin: 6px 0 0 !important; + color: #657481 !important; + font-size: 12px !important; + font-weight: 700 !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__presets { + display: grid !important; + grid-template-columns: repeat(9, 20px) !important; + gap: 7px !important; +} + +.ecommerce-standalone .ecom-smart-color-picker__presets button { + width: 20px !important; + height: 20px !important; + min-height: 20px !important; + border-radius: 5px !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-smart-editor__side label { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 16px !important; + min-height: 34px !important; + color: #1f2e39 !important; + font-size: 14px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__side input { + width: 34px !important; + height: 18px !important; + accent-color: #1073cc !important; +} + +.ecommerce-standalone .ecom-smart-editor__side .ecom-smart-color-picker input { + accent-color: #1073cc !important; +} + +.ecommerce-standalone .ecom-smart-editor__side .ecom-smart-color-picker__slider input { + width: 100% !important; + height: 16px !important; +} + +.ecommerce-standalone .ecom-smart-editor__side .ecom-smart-color-picker__fields input { + width: 100% !important; + height: 30px !important; +} + +.ecommerce-standalone .ecom-smart-editor__link { + justify-self: start !important; + border: 0 !important; + color: #1f2e39 !important; + background: transparent !important; + font-size: 14px !important; + font-weight: 800 !important; +} + +.ecommerce-standalone .ecom-smart-editor__side-actions { + display: grid !important; + gap: 18px !important; + margin-top: 24px !important; +} + +.ecommerce-standalone .ecom-smart-editor__side-actions button { + min-height: 46px !important; + border: 0 !important; + border-radius: 9px !important; + color: #1f2e39 !important; + background: #f1f4f6 !important; + font-size: 15px !important; + font-weight: 800 !important; + cursor: pointer !important; +} + +.ecommerce-standalone .ecom-smart-editor__download { + color: #ffffff !important; + background: #1073cc !important; + box-shadow: 0 12px 24px rgba(16, 115, 204, 0.18) !important; +} + +@media (max-width: 1020px) { + .ecommerce-standalone .ecom-smart-cutout-upload__body, + .ecommerce-standalone .ecom-smart-editor { + grid-template-columns: 1fr !important; + } + + .ecommerce-standalone .ecom-smart-editor__tools { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + + .ecommerce-standalone .ecom-smart-editor__swatches, + .ecommerce-standalone .ecom-smart-editor__scenes { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } +} + +@keyframes ecom-smart-transition-in { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes ecom-smart-page-enter { + from { + opacity: 0; + transform: translateY(10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes ecom-tool-page-enter { + from { + opacity: 0; + transform: translateY(14px) scale(0.992); + filter: saturate(0.96); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + filter: saturate(1); + } +} + +@keyframes ecom-tool-panel-enter { + from { + opacity: 0; + transform: translateY(16px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes ecom-tool-side-enter { + from { + opacity: 0; + transform: translateX(-14px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes ecom-tool-stage-enter { + from { + opacity: 0; + transform: translateX(16px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +.ecommerce-standalone .ecom-tool-page-enter { + animation: ecom-tool-page-enter 460ms cubic-bezier(0.16, 1, 0.3, 1) both !important; + will-change: opacity, transform; +} + +.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-page-sidebar, +.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel, +.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-side, +.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-side, +.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-nav { + animation: ecom-tool-side-enter 430ms cubic-bezier(0.16, 1, 0.3, 1) 40ms both !important; +} + +.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-stage, +.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-workspace, +.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-stage, +.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-cutout-upload, +.ecommerce-standalone .ecom-tool-page-enter .ecom-smart-editor { + animation: ecom-tool-stage-enter 500ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both !important; +} + +.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section, +.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel, +.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel { + animation: ecom-tool-panel-enter 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(1), +.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(1), +.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(1) { + animation-delay: 80ms !important; +} + +.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(2), +.ecommerce-standalone .ecom-tool-page-enter .ecom-watermark-panel:nth-of-type(2), +.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(2) { + animation-delay: 130ms !important; +} + +.ecommerce-standalone .ecom-tool-page-enter .ecom-quick-set-panel > section:nth-of-type(3), +.ecommerce-standalone .ecom-tool-page-enter .ecom-image-workbench-panel:nth-of-type(3) { + animation-delay: 180ms !important; +} + +@keyframes ecom-smart-upload-enter { + from { + opacity: 0; + transform: translateY(14px) scale(0.992); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@keyframes ecom-smart-transition-spin { + to { + transform: rotate(360deg); + } +} + +@keyframes ecom-smart-page-hold { + 0% { + opacity: 1; + transform: scale(1); + } + 100% { + opacity: 0.72; + transform: scale(0.985); + } +} + +@keyframes ecom-smart-editor-enter { + from { + opacity: 0; + transform: translateY(18px) scale(0.985); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* Final composer layering and stateful canvas texture guards. */ +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap { + overflow: visible !important; + z-index: 60 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + position: relative !important; + z-index: 30 !important; + overflow: visible !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover { + z-index: 120 !important; + background: #feffff !important; + box-shadow: 0 22px 54px rgba(16, 115, 204, 0.16), 0 0 0 1px rgba(30, 189, 219, 0.16) !important; + animation: ecommerce-soft-popover-in 420ms cubic-bezier(0.16, 1, 0.3, 1) both !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-popover.is-closing { + pointer-events: none !important; + animation: ecommerce-soft-popover-out 220ms cubic-bezier(0.4, 0, 0.2, 1) both !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board { + position: relative !important; + z-index: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview { + background: #f8f9fa !important; + transition: padding-top 520ms cubic-bezier(0.16, 1, 0.3, 1), + background 640ms ease !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="generating"], +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview[data-status="done"] { + background: + radial-gradient(circle at 18% 18%, rgba(30, 189, 219, 0.08), transparent 24rem), + radial-gradient(circle at 82% 28%, rgba(16, 115, 204, 0.06), transparent 22rem), + linear-gradient(rgba(16, 115, 204, 0.035) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.035) 1px, transparent 1px), + #f8f9fa !important; + background-size: auto, auto, 28px 28px, 28px 28px, auto !important; +} + +.ecommerce-standalone .ecom-smart-editor__background-layer { + background-image: none !important; + background-color: var(--smart-cutout-bg, #ffffff) !important; +} + +/* P0 page polish: premium AI commerce landing surface without touching logic. */ +.ecommerce-standalone__topbar { + min-height: 66px !important; + border-bottom-color: rgba(30, 189, 219, 0.18) !important; + background: rgba(248, 249, 250, 0.86) !important; + box-shadow: 0 12px 36px rgba(16, 115, 204, 0.055) !important; + backdrop-filter: blur(18px) saturate(1.12) !important; + -webkit-backdrop-filter: blur(18px) saturate(1.12) !important; +} + +.ecommerce-standalone__brand { + min-height: 40px !important; +} + +.ecommerce-standalone__brand strong { + letter-spacing: 0 !important; +} + +.ecommerce-standalone__account button { + min-height: 40px !important; + border-radius: 12px !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.055) !important; + transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease !important; +} + +.ecommerce-standalone__account button:hover { + box-shadow: 0 14px 32px rgba(30, 189, 219, 0.12) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"]::before { + opacity: 0.82 !important; + filter: blur(70px) saturate(1.08) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview { + background: + radial-gradient(circle at 19% 8%, rgba(30, 189, 219, 0.13), transparent 24rem), + radial-gradient(circle at 82% 11%, rgba(16, 115, 204, 0.09), transparent 26rem), + linear-gradient(180deg, #fbfdfe 0%, #f8f9fa 54%, #f5f9fb 100%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title { + color: #10202c !important; + text-wrap: balance !important; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + border-color: rgba(30, 189, 219, 0.24) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(251, 253, 254, 0.94)), + #feffff !important; + box-shadow: + 0 24px 70px rgba(16, 115, 204, 0.11), + 0 10px 26px rgba(30, 189, 219, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.98) !important; + transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:focus-within { + border-color: rgba(30, 189, 219, 0.46) !important; + box-shadow: + 0 30px 82px rgba(16, 115, 204, 0.14), + 0 0 0 4px rgba(30, 189, 219, 0.09), + inset 0 1px 0 rgba(255, 255, 255, 1) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea { + color: #10202c !important; + caret-color: #1ebddb !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer textarea::placeholder { + color: #7b929e !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-reference, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__tools button, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button { + transition: + border-color 180ms ease, + background 180ms ease, + color 180ms ease, + box-shadow 180ms ease, + transform 180ms ease !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button:hover, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-option-row button.is-active { + box-shadow: 0 10px 22px rgba(30, 189, 219, 0.08) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send { + background: linear-gradient(135deg, #1073cc 0%, #1ebddb 100%) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:hover:not(:disabled) { + box-shadow: 0 18px 38px rgba(30, 189, 219, 0.28) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-send:disabled { + border-color: rgba(30, 189, 219, 0.18) !important; + background: #eef6f8 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board { + gap: 0 !important; + border-color: rgba(30, 189, 219, 0.16) !important; + background: rgba(254, 255, 255, 0.96) !important; + box-shadow: + 0 22px 56px rgba(16, 115, 204, 0.09), + inset 0 1px 0 rgba(255, 255, 255, 0.95) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button { + isolation: isolate !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button::before, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button::after { + pointer-events: none !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button span { + width: 30px !important; + height: 30px !important; + border: 1px solid rgba(30, 189, 219, 0.16) !important; + border-radius: 10px !important; + background: rgba(30, 189, 219, 0.075) !important; + color: #1073cc !important; + font-size: 16px !important; + transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button strong { + max-width: 100% !important; + letter-spacing: 0 !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover { + color: #0f6678 !important; + background: linear-gradient(180deg, rgba(30, 189, 219, 0.12), rgba(30, 189, 219, 0.055)) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:hover span { + border-color: rgba(30, 189, 219, 0.36) !important; + background: #ffffff !important; + color: #1ebddb !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history { + border-left-color: rgba(30, 189, 219, 0.14) !important; + background: rgba(254, 255, 255, 0.9) !important; + box-shadow: -18px 0 46px rgba(16, 115, 204, 0.065) !important; + backdrop-filter: blur(18px) saturate(1.08) !important; + -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__heading, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__empty, +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__list button { + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; +} + +.ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history__empty { + color: #6d8592 !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 249, 250, 0.92)), + #f8f9fa !important; +} + +@media (max-width: 900px) { + .ecommerce-standalone .product-clone-page[data-tool="clone"] { + padding-right: 0 !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-composer-wrap.is-before-generate { + left: 18px !important; + right: 18px !important; + width: auto !important; + transform: none !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-history { + display: none !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + min-height: 224px !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(6n + 1))::before { + content: none !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(3n + 1))::before { + position: absolute !important; + top: 14px !important; + bottom: 14px !important; + left: 0 !important; + width: 1px !important; + content: "" !important; + background: rgba(30, 189, 219, 0.12) !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:nth-child(n + 4)::after { + position: absolute !important; + top: 0 !important; + left: 14px !important; + right: 14px !important; + height: 1px !important; + content: "" !important; + background: rgba(30, 189, 219, 0.12) !important; + } +} + +@media (max-width: 640px) { + .ecommerce-standalone__topbar { + min-height: 60px !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .clone-ai-preview { + padding-inline: 18px !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-title { + font-size: clamp(26px, 8vw, 34px) !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + min-height: 300px !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(3n + 1))::before { + content: none !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:not(:nth-child(2n + 1))::before { + position: absolute !important; + top: 14px !important; + bottom: 14px !important; + left: 0 !important; + width: 1px !important; + content: "" !important; + background: rgba(30, 189, 219, 0.12) !important; + } + + .ecommerce-standalone .product-clone-page[data-tool="clone"] .ecom-command-quick-board button:nth-child(n + 3)::after { + position: absolute !important; + top: 0 !important; + left: 14px !important; + right: 14px !important; + height: 1px !important; + content: "" !important; + background: rgba(30, 189, 219, 0.12) !important; + } +} + +@keyframes ecommerce-soft-popover-out { + from { + opacity: 1; + filter: blur(0); + transform: translate3d(0, 0, 0) scale(1); + } + to { + opacity: 0; + filter: blur(1px); + transform: translate3d(0, 8px, 0) scale(0.982); + } +} + +/* ---- Typewriter cursor blink ---- */ +.typewriter-cursor { + display: inline-block; + color: #1ebddb; + font-weight: 400; + animation: typewriter-blink 0.8s steps(1) infinite; +} + +@keyframes typewriter-blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0; } +} + +/* #/imageWorkbench narrow viewport alignment and history drawer access. */ +@media (max-width: 1180px) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] { + --ecom-history-offset: 0px !important; + padding-right: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview { + width: 100% !important; + max-width: none !important; + justify-items: center !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + left: 50% !important; + right: auto !important; + width: min(920px, calc(100vw - 48px)) !important; + max-width: calc(100vw - 48px) !important; + transform: translateX(-50%) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-collapsed) { + overflow: hidden !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] > .product-clone-shell.product-clone-shell { + transition: + filter 260ms ease, + opacity 260ms ease, + transform 260ms ease !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-collapsed) > .product-clone-shell.product-clone-shell { + filter: blur(12px) saturate(0.94) !important; + opacity: 0.36 !important; + transform: scale(0.992) !important; + pointer-events: none !important; + user-select: none !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history.ecom-command-history { + position: fixed !important; + top: 0 !important; + right: 0 !important; + bottom: 0 !important; + z-index: 120 !important; + display: grid !important; + width: min(292px, calc(100vw - 72px)) !important; + border-top-left-radius: 22px !important; + border-left-color: rgba(30, 189, 219, 0.28) !important; + background: + linear-gradient(180deg, rgba(240, 250, 255, 0.92), rgba(226, 243, 255, 0.9)), + rgba(254, 255, 255, 0.94) !important; + box-shadow: + -28px 0 72px rgba(16, 115, 204, 0.18), + -1px 0 0 rgba(255, 255, 255, 0.8) inset !important; + backdrop-filter: blur(22px) saturate(1.12) !important; + -webkit-backdrop-filter: blur(22px) saturate(1.12) !important; + transform: translateX(0) !important; + pointer-events: auto !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history.ecom-command-history { + display: grid !important; + transform: translateX(100%) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle { + position: absolute !important; + top: 50% !important; + left: -52px !important; + z-index: 130 !important; + display: inline-flex !important; + visibility: visible !important; + opacity: 1 !important; + pointer-events: auto !important; + } +} + +@media (max-width: 640px) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview { + padding-inline: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: calc(100vw - 32px) !important; + max-width: calc(100vw - 32px) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history.ecom-command-history { + top: 0 !important; + width: min(300px, calc(100vw - 58px)) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle { + left: -46px !important; + width: 40px !important; + height: 40px !important; + min-height: 40px !important; + } +} + +/* #/imageWorkbench mobile composer spacing refinement. */ +@media (max-width: 640px) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate { + top: clamp(26px, 5.6vh, 42px) !important; + gap: 18px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + max-width: min(100%, 520px) !important; + margin-inline: auto !important; + background: + linear-gradient(96deg, #284a56 0%, #4f7f88 42%, #28a8bd 100%) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + font-size: clamp(26px, 6.4vw, 34px) !important; + line-height: 1.18 !important; + text-align: center !important; + text-shadow: 0 16px 38px rgba(40, 168, 189, 0.14) !important; + text-wrap: balance; + white-space: normal !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: 0 !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: auto auto !important; + align-items: stretch !important; + gap: 12px !important; + padding: 16px !important; + border-radius: 24px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + min-height: 74px !important; + height: 74px !important; + padding: 8px 0 2px !important; + line-height: 1.6 !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + display: flex !important; + flex-direction: column !important; + align-items: stretch !important; + justify-content: flex-start !important; + gap: 10px !important; + padding-top: 10px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row { + display: grid !important; + grid-template-columns: repeat(6, 44px) !important; + flex-wrap: nowrap !important; + align-items: center !important; + justify-content: center !important; + gap: 8px !important; + width: 100% !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline { + flex: 0 0 44px !important; + width: 44px !important; + min-width: 44px !important; + max-width: 44px !important; + height: 44px !important; + min-height: 44px !important; + justify-content: center !important; + gap: 0 !important; + padding: 0 !important; + overflow: hidden !important; + border-radius: 15px !important; + font-size: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) > span:not(.ecom-command-option-icon), + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline strong { + display: none !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row .ecom-command-option-icon, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline > span { + display: inline-flex !important; + width: 26px !important; + height: 26px !important; + align-items: center !important; + justify-content: center !important; + margin: 0 !important; + border-radius: 10px !important; + font-size: 16px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row { + align-self: flex-end !important; + justify-content: flex-end !important; + width: auto !important; + min-width: 46px !important; + margin-top: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send { + width: 46px !important; + height: 46px !important; + min-width: 46px !important; + min-height: 46px !important; + } +} + +@media (max-width: 420px) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap.is-before-generate { + top: clamp(72px, 9vh, 88px) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + font-size: clamp(24px, 7.2vw, 30px) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline { + flex-basis: 42px !important; + width: 42px !important; + min-width: 42px !important; + max-width: 42px !important; + height: 42px !important; + min-height: 42px !important; + padding: 0 !important; + } +} + +/* #/imageWorkbench mobile header, headline, and upload clarity. */ +@media (max-width: 640px) { + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__topbar { + display: grid !important; + grid-template-columns: minmax(116px, 1fr) auto !important; + align-items: center !important; + gap: 8px !important; + min-height: 62px !important; + padding: 8px 12px !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand { + min-width: 0 !important; + gap: 8px !important; + padding: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__logo { + flex: 0 0 36px !important; + width: 36px !important; + height: 36px !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand strong { + min-width: 0 !important; + overflow: hidden !important; + color: #10202c !important; + font-size: 15px !important; + font-weight: 900 !important; + line-height: 1.08 !important; + text-overflow: ellipsis !important; + white-space: normal !important; + word-break: keep-all !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__account { + min-width: 0 !important; + gap: 6px !important; + justify-content: flex-end !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__credits { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + min-width: 0 !important; + max-width: 94px !important; + min-height: 38px !important; + padding-inline: 10px !important; + overflow: hidden !important; + font-size: 13px !important; + font-weight: 800 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger { + min-width: 46px !important; + min-height: 40px !important; + padding: 0 7px !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger > span:not(.local-user-avatar) { + max-width: 58px !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + max-width: min(92vw, 520px) !important; + background: linear-gradient(92deg, #10202c 0%, #123d5a 46%, #1073cc 72%, #1ebddb 100%) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + text-shadow: 0 16px 40px rgba(16, 115, 204, 0.12) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference:not(.ecom-command-reference--inline) { + min-height: 54px !important; + grid-auto-flow: column !important; + grid-template-columns: auto minmax(0, auto) !important; + justify-content: center !important; + gap: 10px !important; + border-style: solid !important; + background: + linear-gradient(180deg, rgba(245, 253, 255, 0.98), rgba(231, 249, 254, 0.92)) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference:not(.ecom-command-reference--inline) span { + font-size: 18px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference:not(.ecom-command-reference--inline) strong { + max-width: none !important; + font-size: 13px !important; + white-space: nowrap !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline { + order: -1 !important; + flex-basis: 100% !important; + justify-content: center !important; + gap: 8px !important; + color: #0f6678 !important; + border-color: rgba(30, 189, 219, 0.32) !important; + background: + linear-gradient(180deg, rgba(241, 252, 255, 0.98), rgba(229, 248, 253, 0.92)) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline span { + font-size: 16px !important; + } +} + +@media (max-width: 360px) { + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__topbar { + grid-template-columns: minmax(92px, 1fr) auto !important; + gap: 6px !important; + padding-inline: 10px !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand strong { + font-size: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__brand strong::before { + content: "OmniAI" !important; + font-size: 15px !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-standalone__credits { + max-width: 88px !important; + min-height: 36px !important; + font-size: 12px !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger { + width: 42px !important; + min-width: 42px !important; + padding: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .ecommerce-profile-menu__trigger > span:not(.local-user-avatar) { + display: none !important; + } +} + +/* #/imageWorkbench unified headline tone and asset removal affordance. */ +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + max-width: min(920px, 92vw) !important; + margin-inline: auto !important; + background: + linear-gradient(96deg, #10202c 0%, #164359 36%, #0f829b 68%, #18bfd2 100%) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + text-shadow: 0 18px 46px rgba(15, 130, 155, 0.13) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .typewriter-cursor { + color: #18bfd2 !important; + text-shadow: 0 0 18px rgba(24, 191, 210, 0.28) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button { + width: 30px !important; + height: 30px !important; + min-width: 30px !important; + min-height: 30px !important; + border: 1px solid rgba(255, 255, 255, 0.78) !important; + border-radius: 999px !important; + background: + linear-gradient(135deg, rgba(202, 53, 84, 0.96), rgba(145, 42, 68, 0.96)) !important; + box-shadow: + 0 12px 28px rgba(145, 42, 68, 0.24), + inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; + color: #fff !important; + opacity: 0 !important; + pointer-events: none !important; + transform: translate(6px, -6px) scale(0.92) !important; + transition: + opacity 160ms ease, + transform 160ms ease, + box-shadow 160ms ease, + visibility 160ms ease !important; + visibility: hidden !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb:hover > button, +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb:focus-within > button { + opacity: 1 !important; + pointer-events: auto !important; + transform: translate(0, 0) scale(1) !important; + visibility: visible !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button:hover { + box-shadow: + 0 14px 32px rgba(145, 42, 68, 0.32), + inset 0 1px 0 rgba(255, 255, 255, 0.38) !important; + transform: translate(0, 0) scale(1.04) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button .anticon { + font-size: 14px !important; +} + +/* Quick tools polish: refined layout, controls, and preview surfaces. */ +.ecommerce-standalone .ecom-quick-page-wrap, +.ecommerce-standalone .ecom-quick-set-page, +.ecommerce-standalone .ecom-watermark-page, +.ecommerce-standalone .ecom-image-workbench-page { + --quick-border: rgba(26, 74, 108, 0.11); + --quick-border-strong: rgba(16, 115, 204, 0.2); + --quick-surface: #ffffff; + --quick-surface-soft: #f7f9fb; + --quick-surface-tint: #edf8ff; + --quick-text: #162535; + --quick-muted: #657686; + --quick-accent: #1073cc; + --quick-cyan: #1ebddb; +} + +.ecommerce-standalone .ecom-quick-page-wrap { + background: + linear-gradient(90deg, rgba(255, 255, 255, 0.82), transparent 420px), + linear-gradient(rgba(16, 115, 204, 0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.02) 1px, transparent 1px), + #f6f8fa !important; + background-size: auto, 28px 28px, 28px 28px, auto !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar { + width: 76px !important; + flex: 0 0 76px !important; + gap: 8px !important; + padding: 16px 8px !important; + border-right: 1px solid var(--quick-border) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.94)) !important; + box-shadow: 10px 0 28px rgba(16, 115, 204, 0.04) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button { + min-height: 64px !important; + padding: 8px 4px !important; + border: 1px solid transparent !important; + border-radius: 8px !important; + color: #506475 !important; + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button:hover { + border-color: rgba(30, 189, 219, 0.18) !important; + background: rgba(237, 248, 255, 0.82) !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button.is-active { + border-color: rgba(16, 115, 204, 0.22) !important; + color: var(--quick-accent) !important; + background: linear-gradient(180deg, #edf8ff, #f8fdff) !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.1) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button.is-active::before { + left: -8px !important; + top: 12px !important; + bottom: 12px !important; + width: 3px !important; + border-radius: 999px !important; + background: linear-gradient(180deg, var(--quick-cyan), var(--quick-accent)) !important; +} + +.ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: minmax(386px, 420px) minmax(0, 1fr) !important; + background: transparent !important; +} + +.ecommerce-standalone .ecom-hot-video-page .ecom-quick-set-body { + grid-template-columns: minmax(366px, 404px) minmax(0, 1fr) !important; +} + +.ecommerce-standalone .ecom-quick-set-panel, +.ecommerce-standalone .ecom-watermark-side, +.ecommerce-standalone .ecom-image-workbench-side { + gap: 12px !important; + padding: 18px 16px !important; + border-color: var(--quick-border) !important; + border-radius: 0 !important; + background: + linear-gradient(180deg, rgba(247, 250, 252, 0.92), transparent 150px), + var(--quick-surface) !important; + box-shadow: 12px 0 32px rgba(16, 115, 204, 0.045) !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.32) transparent !important; +} + +.ecommerce-standalone .ecom-watermark-side, +.ecommerce-standalone .ecom-image-workbench-side { + border-radius: 8px !important; + box-shadow: 0 14px 34px rgba(16, 115, 204, 0.07) !important; +} + +.ecommerce-standalone .ecom-quick-set-panel-head { + position: sticky !important; + top: -18px !important; + z-index: 12 !important; + min-height: 42px !important; + margin: -18px -16px 2px !important; + padding: 14px 16px 10px !important; + border-bottom: 1px solid rgba(16, 115, 204, 0.08) !important; + background: rgba(255, 255, 255, 0.92) !important; + backdrop-filter: blur(14px) !important; + -webkit-backdrop-filter: blur(14px) !important; +} + +.ecommerce-standalone .ecom-quick-set-page-title { + color: var(--quick-text) !important; + font-size: 18px !important; + font-weight: 950 !important; + line-height: 1.2 !important; +} + +.ecommerce-standalone .ecom-quick-set-back { + min-height: 30px !important; + padding: 0 10px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 8px !important; + color: #526474 !important; + background: #f7fafc !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-set-back:hover { + border-color: rgba(30, 189, 219, 0.32) !important; + color: var(--quick-accent) !important; + background: var(--quick-surface-tint) !important; +} + +.ecommerce-standalone .ecom-watermark-intro, +.ecommerce-standalone .ecom-image-workbench-intro { + margin: 0 2px 2px !important; + color: var(--quick-muted) !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.65 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel section, +.ecommerce-standalone .ecom-watermark-panel, +.ecommerce-standalone .ecom-image-workbench-panel { + gap: 10px !important; + padding: 13px !important; + border: 1px solid var(--quick-border) !important; + border-radius: 8px !important; + background: #ffffff !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-set-panel section > strong, +.ecommerce-standalone .ecom-watermark-panel > strong, +.ecommerce-standalone .ecom-image-workbench-panel > strong, +.ecommerce-standalone .ecom-quick-set-panel section header strong, +.ecommerce-standalone .ecom-watermark-panel header strong, +.ecommerce-standalone .ecom-image-workbench-panel header strong { + color: var(--quick-text) !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel header span, +.ecommerce-standalone .ecom-watermark-panel header span, +.ecommerce-standalone .ecom-image-workbench-panel header span { + border-radius: 999px !important; + color: #276987 !important; + background: #eef7fa !important; +} + +.ecommerce-standalone .ecom-quick-set-upload, +.ecommerce-standalone .ecom-watermark-upload-card, +.ecommerce-standalone .ecom-image-workbench-upload { + min-height: 112px !important; + border-color: rgba(30, 189, 219, 0.34) !important; + border-radius: 8px !important; + background: + linear-gradient(180deg, rgba(237, 248, 255, 0.72), rgba(255, 255, 255, 0.94)) !important; + transition: + border-color 160ms ease, + background 160ms ease, + box-shadow 160ms ease, + transform 160ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-upload:hover, +.ecommerce-standalone .ecom-watermark-upload-card:hover, +.ecommerce-standalone .ecom-image-workbench-upload:hover, +.ecommerce-standalone .ecom-watermark-upload-card.is-dragging, +.ecommerce-standalone .ecom-image-workbench-upload.is-dragging { + border-color: var(--quick-cyan) !important; + background: #f7fcff !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.09) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs { + width: 100% !important; + padding-top: 4px !important; + justify-content: center !important; +} + +.ecommerce-standalone .ecom-command-asset-thumb.ecom-quick-upload-thumb { + border-radius: 8px !important; + box-shadow: 0 6px 16px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button, +.ecommerce-standalone .ecom-quick-detail-types button, +.ecommerce-standalone .ecom-hot-video-options button, +.ecommerce-standalone .ecom-quick-detail-modules button, +.ecommerce-standalone .ecom-quick-set-counts article, +.ecommerce-standalone .ecom-image-workbench-ratios, +.ecommerce-standalone .ecom-image-workbench-clear, +.ecommerce-standalone .ecom-watermark-url-row input, +.ecommerce-standalone .ecom-image-workbench-url-row input, +.ecommerce-standalone .ecom-quick-set-panel textarea, +.ecommerce-standalone .ecom-image-workbench-panel textarea { + border-radius: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button, +.ecommerce-standalone .ecom-quick-detail-types button, +.ecommerce-standalone .ecom-hot-video-options button, +.ecommerce-standalone .ecom-quick-detail-modules button, +.ecommerce-standalone .ecom-quick-set-counts article { + border-color: var(--quick-border) !important; + background: var(--quick-surface-soft) !important; + transition: + border-color 160ms ease, + background 160ms ease, + box-shadow 160ms ease, + transform 160ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button:hover, +.ecommerce-standalone .ecom-quick-detail-types button:hover, +.ecommerce-standalone .ecom-hot-video-options button:hover, +.ecommerce-standalone .ecom-quick-detail-modules button:hover, +.ecommerce-standalone .ecom-quick-set-counts article:hover { + border-color: rgba(16, 115, 204, 0.24) !important; + background: #ffffff !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.07) !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button.is-active, +.ecommerce-standalone .ecom-quick-detail-types button.is-active, +.ecommerce-standalone .ecom-hot-video-options button.is-active, +.ecommerce-standalone .ecom-quick-detail-modules button.is-active { + border-color: rgba(16, 115, 204, 0.34) !important; + background: linear-gradient(180deg, #edf8ff, #f8fdff) !important; + box-shadow: inset 0 0 0 1px rgba(30, 189, 219, 0.08), 0 8px 18px rgba(16, 115, 204, 0.07) !important; +} + +.ecommerce-standalone .ecom-quick-set-counts p { + border-radius: 8px !important; + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-quick-set-counts p button:disabled { + color: #b3c1ca !important; + cursor: not-allowed !important; +} + +.ecommerce-standalone .ecom-quick-set-primary, +.ecommerce-standalone .ecom-watermark-primary, +.ecommerce-standalone .ecom-image-workbench-primary { + min-height: 48px !important; + border-radius: 8px !important; + background: linear-gradient(135deg, #0f6fbd 0%, #19adc8 100%) !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.18) !important; + transition: + transform 160ms ease, + box-shadow 160ms ease, + filter 160ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-primary:hover:not(:disabled), +.ecommerce-standalone .ecom-watermark-primary:hover:not(:disabled), +.ecommerce-standalone .ecom-image-workbench-primary:hover:not(:disabled) { + box-shadow: 0 16px 34px rgba(16, 115, 204, 0.22) !important; + filter: saturate(1.04) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-quick-set-primary:disabled, +.ecommerce-standalone .ecom-watermark-primary:disabled, +.ecommerce-standalone .ecom-image-workbench-primary:disabled { + color: #8fa1af !important; + background: #edf1f4 !important; + box-shadow: none !important; + transform: none !important; +} + +.ecommerce-standalone .ecom-quick-set-stage, +.ecommerce-standalone .ecom-hot-video-page .ecom-quick-set-stage { + gap: 16px !important; + padding: 26px 32px !important; + background: + radial-gradient(circle at 20% 18%, rgba(30, 189, 219, 0.08), transparent 20rem), + radial-gradient(circle at 82% 22%, rgba(16, 115, 204, 0.055), transparent 22rem), + #f7f9fb !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-head { + padding-bottom: 16px !important; + border-bottom-color: rgba(26, 74, 108, 0.1) !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head h1, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy h1 { + font-size: 24px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head p, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy p { + max-width: 720px !important; + color: var(--quick-muted) !important; + line-height: 1.65 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head div button, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-flowbar__zoom button { + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 8px !important; + background: #edf8ff !important; +} + +.ecommerce-standalone .ecom-quick-set-canvas, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-workspace, +.ecommerce-standalone .ecom-watermark-workspace, +.ecommerce-standalone .ecom-image-workbench-stage { + border-color: var(--quick-border) !important; + border-radius: 8px !important; + background: + linear-gradient(rgba(16, 115, 204, 0.026) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.022) 1px, transparent 1px), + #ffffff !important; + background-size: 26px 26px, 26px 26px, auto !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px rgba(16, 115, 204, 0.05) !important; +} + +.ecommerce-standalone .ecom-quick-set-empty, +.ecommerce-standalone .ecom-watermark-dropzone, +.ecommerce-standalone .ecom-image-workbench-empty, +.ecommerce-standalone .ecom-watermark-empty, +.ecommerce-standalone .ecom-watermark-processing { + border-radius: 8px !important; + border-color: rgba(16, 115, 204, 0.13) !important; + background: rgba(255, 255, 255, 0.88) !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.055) !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card, +.ecommerce-standalone .ecom-quick-detail-preview-card, +.ecommerce-standalone .ecom-quick-detail-result { + border-radius: 8px !important; + border-color: var(--quick-border) !important; + box-shadow: 0 18px 44px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card figure, +.ecommerce-standalone .ecom-quick-detail-preview-card figure, +.ecommerce-standalone .ecom-quick-detail-result, +.ecommerce-standalone .ecom-watermark-preview-card > img, +.ecommerce-standalone .ecom-image-workbench-preview { + border-radius: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt { + border-radius: 8px !important; + border-color: var(--quick-border) !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.055) !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt textarea { + min-height: 70px !important; + font-size: 13px !important; +} + +.ecommerce-standalone .ecom-watermark-grid { + border: 0 !important; + border-radius: 8px !important; + gap: 1px !important; + background: rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card { + background: + linear-gradient(rgba(16, 115, 204, 0.024) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.02) 1px, transparent 1px), + #ffffff !important; + background-size: 24px 24px, 24px 24px, auto !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card:first-child { + border-right: 0 !important; +} + +.ecommerce-standalone .ecom-image-workbench-canvas { + border-radius: 8px !important; +} + +.ecommerce-standalone .ecom-image-workbench-image-frame { + border-radius: 8px !important; + box-shadow: 0 16px 38px rgba(16, 115, 204, 0.1) !important; +} + +.ecommerce-standalone .ecom-hot-video-page .ecom-video-flow-canvas, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-canvas { + background: + linear-gradient(rgba(16, 115, 204, 0.024) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.02) 1px, transparent 1px), + #ffffff !important; + background-size: 24px 24px, 24px 24px, auto !important; +} + +.ecommerce-standalone .ecom-quick-set-help { + border-radius: 8px !important; + color: #526474 !important; + background: rgba(255, 255, 255, 0.92) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; +} + +@media (max-width: 1280px) { + .ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: minmax(330px, 370px) minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-hot-video-page .ecom-quick-set-body { + grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important; + } +} + +/* ── Quick Page Responsive ── */ +@media (max-width: 1280px) { + .ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: minmax(340px, 380px) minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar { + flex: 0 0 68px !important; + width: 68px !important; + padding: 14px 6px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button { + min-height: 54px !important; + gap: 3px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button .anticon { + font-size: 18px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button span:last-child { + font-size: 9px !important; + } +} + +@media (max-width: 960px) { + .ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar { + flex: 0 0 56px !important; + width: 56px !important; + padding: 10px 4px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button { + min-height: 48px !important; + padding: 6px 3px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button .anticon { + font-size: 16px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button span:last-child { + font-size: 8px !important; + } +} + +@media (max-width: 720px) { + .ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-quick-set-stage { + display: none !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar { + flex: 0 0 48px !important; + width: 48px !important; + padding: 8px 3px !important; + gap: 2px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button { + min-height: 42px !important; + padding: 4px 2px !important; + border-radius: 8px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button .anticon { + font-size: 14px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button span:last-child { + font-size: 7px !important; + } + + .ecommerce-standalone .ecom-quick-page-sidebar button.is-active::before { + left: -1px !important; + width: 2px !important; + top: 8px !important; + bottom: 8px !important; + } +} + +/* ── Watermark / Image Workbench Page Responsive ── */ +@media (max-width: 960px) { + .ecommerce-standalone .ecom-watermark-grid { + grid-template-columns: minmax(0, 1fr) !important; + gap: 14px !important; + padding: 16px !important; + } + + .ecommerce-standalone .ecom-image-workbench-page .ecom-image-workbench-body { + grid-template-columns: minmax(280px, 340px) minmax(0, 1fr) !important; + } +} + +@media (max-width: 720px) { + .ecommerce-standalone .ecom-watermark-page .ecom-quick-set-body { + grid-template-columns: minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-watermark-grid { + grid-template-columns: minmax(0, 1fr) !important; + padding: 10px !important; + gap: 10px !important; + } + + .ecommerce-standalone .ecom-watermark-preview-card { + padding: 12px !important; + } + + .ecommerce-standalone .ecom-watermark-page .ecom-quick-set-stage { + display: none !important; + } + + .ecommerce-standalone .ecom-image-workbench-page .ecom-image-workbench-body { + grid-template-columns: minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-image-workbench-page .ecom-image-workbench-stage { + display: none !important; + } +} + +/* ── Smart Cutout Page Responsive ── */ +@media (max-width: 1280px) { + .ecommerce-standalone .ecom-smart-cutout-page .ecom-smart-editor { + grid-template-columns: minmax(260px, 300px) minmax(0, 1fr) !important; + } +} + +@media (max-width: 960px) { + .ecommerce-standalone .ecom-smart-cutout-page .ecom-smart-editor { + grid-template-columns: minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-smart-cutout-page .ecom-smart-editor__side { + order: 2 !important; + max-height: 40vh !important; + } + + .ecommerce-standalone .ecom-smart-cutout-page .ecom-smart-editor__canvas { + order: 1 !important; + } + + .ecommerce-standalone .ecom-smart-cutout-nav { + flex-wrap: wrap !important; + gap: 6px !important; + } +} + +@media (max-width: 720px) { + .ecommerce-standalone .ecom-smart-editor__scenes { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} + +@media (hover: none) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb > button { + opacity: 1 !important; + pointer-events: auto !important; + transform: translate(0, 0) scale(1) !important; + visibility: visible !important; + } +} + +/* #/imageWorkbench SaaS entry refinement. */ +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] { + --ecom-entry-surface: rgba(255, 255, 255, 0.86); + --ecom-entry-surface-strong: rgba(255, 255, 255, 0.96); + --ecom-entry-border-hairline: rgba(30, 189, 219, 0.16); + --ecom-entry-border-active: rgba(30, 189, 219, 0.42); + --ecom-entry-shadow-soft: 0 18px 54px rgba(16, 115, 204, 0.09); + --ecom-entry-shadow-focus: 0 24px 72px rgba(16, 115, 204, 0.14); + background: + radial-gradient(48rem 24rem at 50% 7%, rgba(30, 189, 219, 0.15), transparent 72%), + radial-gradient(34rem 20rem at 14% 24%, rgba(16, 115, 204, 0.08), transparent 68%), + linear-gradient(180deg, #f8fbfc 0%, #f5f9fb 48%, #f8fafb 100%) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview { + padding-top: clamp(56px, 7.6vh, 96px) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + gap: clamp(16px, 2.1vw, 24px) !important; + padding-inline: clamp(20px, 3vw, 44px) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + min-height: 1.18em !important; + font-weight: 860 !important; + line-height: 1.14 !important; + text-wrap: balance; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + border-color: var(--ecom-entry-border-hairline) !important; + border-radius: 26px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.985), rgba(248, 253, 255, 0.92)), + linear-gradient(135deg, rgba(30, 189, 219, 0.075), rgba(16, 115, 204, 0.035)) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.94), + inset 0 -1px 0 rgba(30, 189, 219, 0.05), + var(--ecom-entry-shadow-soft) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:hover, +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:focus-within { + border-color: var(--ecom-entry-border-active) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.96), + 0 0 0 4px rgba(30, 189, 219, 0.08), + var(--ecom-entry-shadow-focus) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + color: var(--ecom-entry-text) !important; + font-size: 15px !important; + line-height: 1.7 !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea::placeholder { + color: rgba(16, 32, 44, 0.42) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + border-top-color: rgba(30, 189, 219, 0.1) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row { + gap: 9px !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button, +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline { + min-height: 40px !important; + border-color: rgba(30, 189, 219, 0.16) !important; + border-radius: 15px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 252, 254, 0.82)) !important; + color: rgba(16, 32, 44, 0.72) !important; + font-weight: 760 !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button > span, +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline strong { + min-width: 0 !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-icon { + width: 22px !important; + height: 22px !important; + border-color: rgba(30, 189, 219, 0.12) !important; + background: rgba(232, 249, 253, 0.74) !important; + color: #0f829b !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:hover, +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline:hover, +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button.is-active { + border-color: var(--ecom-entry-border-active) !important; + background: + linear-gradient(180deg, rgba(246, 254, 255, 0.98), rgba(228, 249, 253, 0.92)) !important; + color: var(--ecom-entry-text) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send { + width: 50px !important; + height: 50px !important; + min-width: 50px !important; + border-radius: 17px !important; + box-shadow: + 0 18px 38px rgba(30, 189, 219, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.38) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board { + overflow: hidden !important; + border-color: rgba(30, 189, 219, 0.1) !important; + border-radius: 24px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 253, 255, 0.66)), + rgba(255, 255, 255, 0.62) !important; + box-shadow: + 0 18px 52px rgba(16, 115, 204, 0.075), + inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button { + gap: 12px !important; + border-color: rgba(30, 189, 219, 0.075) !important; + border-radius: 0 !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 252, 254, 0.58)) !important; + box-shadow: none !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button:hover { + border-color: rgba(30, 189, 219, 0.28) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 251, 254, 0.92)) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.84), + 0 16px 34px rgba(16, 115, 204, 0.1) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span { + display: inline-flex !important; + width: 32px !important; + height: 32px !important; + align-items: center !important; + justify-content: center !important; + border: 1px solid rgba(30, 189, 219, 0.15) !important; + border-radius: 12px !important; + background: linear-gradient(180deg, rgba(231, 249, 253, 0.96), rgba(217, 244, 250, 0.86)) !important; + color: #0f829b !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74) !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board strong { + font-weight: 820 !important; +} + +.ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle.ecom-command-history__toggle { + border-color: rgba(30, 189, 219, 0.13) !important; + background: rgba(255, 255, 255, 0.76) !important; + color: rgba(16, 32, 44, 0.62) !important; + box-shadow: 0 14px 32px rgba(16, 115, 204, 0.1) !important; +} + +@media (min-width: 1181px) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle.ecom-command-history__toggle { + opacity: 0.82 !important; + transform: translateX(2px) !important; + } +} + +@media (max-width: 760px) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview { + padding-top: 18px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + gap: 16px !important; + padding-inline: 16px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + max-width: min(100%, 520px) !important; + min-height: 2.36em !important; + overflow: visible !important; + background: + linear-gradient(96deg, #284a56 0%, #4f7f88 42%, #28a8bd 100%) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + font-size: clamp(26px, 6.4vw, 34px) !important; + line-height: 1.18 !important; + text-shadow: 0 16px 38px rgba(40, 168, 189, 0.14) !important; + text-wrap: balance; + white-space: normal !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + width: min(100%, 352px) !important; + margin-inline: auto !important; + padding: 15px !important; + border-radius: 24px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + min-height: 86px !important; + font-size: 14px !important; + line-height: 1.62 !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + gap: 12px !important; + padding-top: 12px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row { + display: grid !important; + grid-template-columns: repeat(6, 44px) !important; + justify-content: center !important; + gap: 8px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline { + width: 44px !important; + min-width: 44px !important; + max-width: 44px !important; + height: 44px !important; + min-height: 44px !important; + justify-content: center !important; + gap: 0 !important; + padding: 0 !important; + overflow: hidden !important; + font-size: 0 !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) > span:not(.ecom-command-option-icon), + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline strong { + display: none !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row .ecom-command-option-icon, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline > span { + display: inline-flex !important; + width: 26px !important; + height: 26px !important; + align-items: center !important; + justify-content: center !important; + margin: 0 !important; + font-size: 16px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send { + width: 48px !important; + height: 48px !important; + min-width: 48px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board { + width: min(100%, 352px) !important; + margin-inline: auto !important; + border-radius: 22px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button { + min-height: 70px !important; + padding: 12px 10px !important; + gap: 9px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span { + width: 30px !important; + height: 30px !important; + border-radius: 11px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board strong { + font-size: 13px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover { + position: absolute !important; + top: calc(100% + 12px) !important; + right: auto !important; + bottom: auto !important; + left: 0 !important; + z-index: 140 !important; + box-sizing: border-box !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + max-height: min(280px, calc(100dvh - 148px)) !important; + overflow: auto !important; + border-radius: 22px !important; + animation: none !important; + box-shadow: + 0 28px 76px rgba(16, 115, 204, 0.2), + inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; + transform: none !important; + translate: none !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--list, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 10px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover button { + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle { + left: -42px !important; + width: 38px !important; + height: 44px !important; + min-width: 38px !important; + min-height: 44px !important; + opacity: 0.9 !important; + } +} diff --git a/src/styles/standalone/overrides.css b/src/styles/standalone/overrides.css new file mode 100644 index 0000000..1e7d62b --- /dev/null +++ b/src/styles/standalone/overrides.css @@ -0,0 +1,3622 @@ + +@media (max-width: 640px) { + html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover { + position: absolute !important; + inset: calc(100% + 12px) auto auto 0 !important; + box-sizing: border-box !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + max-height: min(280px, calc(100dvh - 150px)) !important; + overflow: auto !important; + animation: none !important; + transform: none !important; + translate: none !important; + } + + html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--grid, + html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--list, + html body .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 10px !important; + } +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + max-width: min(100%, 520px) !important; + min-height: 2.28em !important; + background: + linear-gradient(96deg, #10202c 0%, #164359 36%, #0f829b 68%, #18bfd2 100%) !important; + -webkit-background-clip: text !important; + background-clip: text !important; + color: transparent !important; + font-size: clamp(29px, 7.8vw, 34px) !important; + line-height: 1.14 !important; + text-shadow: 0 18px 46px rgba(15, 130, 155, 0.13) !important; + text-wrap: balance; + white-space: normal !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline { + width: 44px !important; + min-width: 44px !important; + max-width: 44px !important; + height: 44px !important; + min-height: 44px !important; + padding: 0 !important; + overflow: hidden !important; + font-size: 0 !important; + line-height: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row { + max-width: 100% !important; + overflow: hidden !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) > span:not(.ecom-command-option-icon), + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline strong { + display: none !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row .ecom-command-option-icon, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference--inline > span { + display: inline-flex !important; + width: 26px !important; + height: 26px !important; + align-items: center !important; + justify-content: center !important; + margin: 0 !important; + font-size: 16px !important; + line-height: 1 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover { + position: absolute !important; + inset: calc(100% + 12px) auto auto 0 !important; + box-sizing: border-box !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + max-height: min(280px, calc(100dvh - 150px)) !important; + overflow: auto !important; + animation: none !important; + transform: none !important; + translate: none !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--settings { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + align-content: start !important; + gap: 10px !important; + max-height: min(360px, 42dvh) !important; + overflow-x: hidden !important; + overflow-y: auto !important; + padding: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings header { + display: flex !important; + grid-column: 1 / -1 !important; + align-items: center !important; + justify-content: space-between !important; + gap: 12px !important; + min-width: 0 !important; + margin: 0 0 2px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings > .ecom-command-count-row { + grid-column: 1 / -1 !important; + display: grid !important; + grid-template-columns: minmax(0, 1fr) auto !important; + width: 100% !important; + min-width: 0 !important; + min-height: 78px !important; + align-items: center !important; + gap: 10px !important; + padding: 12px !important; + overflow: hidden !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > span { + min-width: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > span strong, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > span em { + display: block !important; + max-width: 100% !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > div { + display: grid !important; + grid-template-columns: 34px 24px 34px !important; + align-items: center !important; + justify-content: end !important; + gap: 6px !important; + min-width: 98px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > div button { + width: 34px !important; + min-width: 34px !important; + height: 34px !important; + min-height: 34px !important; + padding: 0 !important; + border-radius: 999px !important; + font-size: 16px !important; + line-height: 1 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-count-row > div b { + min-width: 24px !important; + text-align: center !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid--detail, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid--model, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid--video, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-levels { + grid-column: 1 / -1 !important; + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; + min-width: 0 !important; + max-height: none !important; + overflow: visible !important; + gap: 8px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-module-grid button, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-levels button { + width: 100% !important; + min-width: 0 !important; + max-width: none !important; + min-height: 44px !important; + overflow: hidden !important; + white-space: normal !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-layout { + grid-column: 1 / -1 !important; + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + width: 100% !important; + min-width: 0 !important; + gap: 10px !important; + overflow: visible !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings .ecom-command-hot-upload { + width: 100% !important; + min-width: 0 !important; + min-height: 132px !important; + max-width: none !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile { + grid-column: 1 / -1 !important; + width: 100% !important; + min-width: 0 !important; + overflow: hidden !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile section > div { + display: flex !important; + flex-wrap: wrap !important; + gap: 6px !important; + min-width: 0 !important; + overflow: visible !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile button { + flex: 1 1 calc(50% - 6px) !important; + min-width: 0 !important; + max-width: none !important; + } +} + +@media (max-width: 420px) { + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + font-size: clamp(24px, 7.2vw, 30px) !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + padding: 14px !important; + } + + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button, + .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline { + width: 42px !important; + min-width: 42px !important; + max-width: 42px !important; + height: 42px !important; + min-height: 42px !important; + font-size: 0 !important; + } +} + +@media (max-width: 420px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-title.ecom-command-title { + font-size: clamp(25px, 8vw, 30px) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row { + grid-template-columns: repeat(6, minmax(0, clamp(38px, 10.6vw, 42px))) !important; + gap: 7px !important; + justify-content: center !important; + overflow: hidden !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-upload-inline { + width: clamp(38px, 10.6vw, 42px) !important; + min-width: 0 !important; + max-width: 42px !important; + height: clamp(38px, 10.6vw, 42px) !important; + min-height: clamp(38px, 10.6vw, 42px) !important; + } +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings-set, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings-model, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover.ecom-command-popover--settings-hot { + inset: calc(100% + 12px) auto auto 0 !important; + left: 0 !important; + right: auto !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + margin: 0 !important; + overflow-x: hidden !important; + overflow-y: auto !important; + transform: none !important; + translate: none !important; + } +} + +/* #/imageWorkbench mid-size refinement: keep the composer and floating panels balanced on tablet/small desktop widths. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline { + position: relative !important; + flex: 0 0 48px !important; + width: 48px !important; + min-width: 48px !important; + max-width: 48px !important; + height: 48px !important; + min-height: 48px !important; + justify-content: center !important; + gap: 0 !important; + padding: 0 !important; + border-radius: 17px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline > span { + width: 0 !important; + min-width: 0 !important; + height: 0 !important; + margin: 0 !important; + overflow: hidden !important; + border: 0 !important; + background: transparent !important; + color: transparent !important; + font-size: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline .anticon { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline strong { + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + overflow: hidden !important; + clip: rect(0 0 0 0) !important; + clip-path: inset(50%) !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline::before { + content: "+" !important; + display: inline-grid !important; + width: 24px !important; + height: 24px !important; + place-items: center !important; + border-radius: 10px !important; + background: linear-gradient(180deg, rgba(235, 252, 255, 0.96), rgba(218, 245, 250, 0.9)) !important; + color: #0f829b !important; + font-size: 22px !important; + font-weight: 760 !important; + line-height: 1 !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; +} + +@media (min-width: 641px) and (max-width: 1280px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: min(1080px, calc(100vw - 96px)) !important; + gap: clamp(14px, 2.2vh, 20px) !important; + padding-inline: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + width: 100% !important; + min-height: clamp(258px, 40vh, 304px) !important; + padding: clamp(18px, 2.8vw, 24px) !important; + border-radius: 26px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + min-height: clamp(76px, 14vh, 104px) !important; + max-height: clamp(104px, 18vh, 136px) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + align-items: end !important; + gap: 12px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row { + display: flex !important; + flex-wrap: wrap !important; + gap: 10px !important; + max-width: min(100%, 660px) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) { + min-height: 44px !important; + padding-inline: 12px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover { + inset: calc(100% + 14px) auto auto 0 !important; + left: 0 !important; + right: auto !important; + box-sizing: border-box !important; + width: 100% !important; + min-width: 0 !important; + max-width: 100% !important; + max-height: min(386px, max(220px, calc(100dvh - 470px))) !important; + margin: 0 !important; + overflow-x: hidden !important; + overflow-y: auto !important; + border-radius: 24px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(244, 252, 254, 0.94)) !important; + box-shadow: + 0 30px 76px rgba(16, 115, 204, 0.17), + inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; + transform: none !important; + translate: none !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 10px !important; + padding: 18px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button { + display: grid !important; + min-height: 68px !important; + align-content: center !important; + gap: 5px !important; + padding: 11px 12px !important; + border-radius: 16px !important; + text-align: center !important; + white-space: normal !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button strong, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages button span { + min-width: 0 !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--settings { + display: grid !important; + gap: 14px !important; + padding: 18px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-layout { + display: grid !important; + grid-template-columns: minmax(260px, 1.08fr) minmax(220px, 0.72fr) !important; + gap: 14px !important; + align-items: stretch !important; + width: 100% !important; + min-width: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-upload { + min-height: 188px !important; + border-radius: 18px !important; + background: + linear-gradient(180deg, rgba(250, 254, 255, 0.96), rgba(238, 250, 253, 0.84)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-levels { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-template-rows: repeat(2, minmax(0, 1fr)) !important; + gap: 12px !important; + width: 100% !important; + min-width: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-levels button { + min-height: 88px !important; + align-content: center !important; + padding: 16px !important; + border-radius: 18px !important; + text-align: left !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model { + grid-template-columns: minmax(230px, 0.82fr) minmax(0, 1.18fr) !important; + align-items: start !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model header { + grid-column: 1 / -1 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile { + grid-column: 1 !important; + grid-row: 2 !important; + width: 100% !important; + min-width: 0 !important; + max-height: 286px !important; + overflow-y: auto !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model { + grid-column: 2 !important; + grid-row: 2 !important; + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + width: 100% !important; + min-width: 0 !important; + max-height: 286px !important; + overflow-y: auto !important; + gap: 10px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile section > div { + display: flex !important; + flex-wrap: wrap !important; + gap: 8px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-model-profile button { + flex: 1 1 auto !important; + min-width: max-content !important; + max-width: 100% !important; + } +} + +@media (min-width: 641px) and (max-width: 760px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover.ecom-command-popover--languages { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-hot .ecom-command-hot-layout, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model { + grid-column: 1 !important; + grid-row: auto !important; + } +} + +/* #/imageWorkbench targeted polish: compact setting panels and align the history trigger with the panel top. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-char-count { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings { + box-sizing: border-box !important; + width: min(432px, calc(100vw - 48px)) !important; + min-width: 0 !important; + max-width: min(432px, calc(100vw - 48px)) !important; + max-height: min(420px, calc(100dvh - 220px)) !important; + gap: 10px !important; + padding: 14px !important; + border-radius: 20px !important; + overflow-x: hidden !important; + overflow-y: auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-set { + width: min(396px, calc(100vw - 48px)) !important; + max-width: min(396px, calc(100vw - 48px)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-set > .ecom-command-count-row { + min-height: 60px !important; + gap: 8px !important; + padding: 10px 11px !important; + border-radius: 15px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-set .ecom-command-count-row > span strong { + font-size: 13px !important; + line-height: 1.35 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-set .ecom-command-count-row > span em { + font-size: 11px !important; + line-height: 1.35 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-set .ecom-command-count-row > div { + grid-template-columns: 28px 22px 28px !important; + gap: 5px !important; + min-width: 86px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-set .ecom-command-count-row > div button { + width: 28px !important; + min-width: 28px !important; + height: 28px !important; + min-height: 28px !important; + font-size: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-model { + width: min(508px, calc(100vw - 48px)) !important; + max-width: min(508px, calc(100vw - 48px)) !important; + grid-template-columns: minmax(172px, 0.78fr) minmax(0, 1fr) !important; + align-items: start !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model header { + grid-column: 1 / -1 !important; + margin-bottom: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile { + grid-column: 1 !important; + grid-row: 2 !important; + max-height: 270px !important; + padding-right: 2px !important; + overflow-y: auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile section { + gap: 7px !important; + padding: 9px 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile section > span { + font-size: 12px !important; + line-height: 30px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile section > div { + gap: 6px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile button { + min-height: 30px !important; + padding: 0 10px !important; + border-radius: 999px !important; + font-size: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model { + grid-column: 2 !important; + grid-row: 2 !important; + display: grid !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + gap: 8px !important; + width: 100% !important; + max-height: 270px !important; + overflow-y: auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model button { + min-height: 38px !important; + padding: 0 10px !important; + border-radius: 13px !important; + text-align: center !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + font-size: 16px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle .anticon { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + font-size: 18px !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle { + top: 16px !important; + transform: none !important; +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-set, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-model { + width: 100% !important; + max-width: 100% !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model { + grid-column: 1 !important; + grid-row: auto !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle { + top: 12px !important; + } +} + +/* #/imageWorkbench follow-up polish: larger adaptive composer, cleaner model panel, and livelier history handle. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: min(1128px, calc(100vw - 120px)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: clamp(248px, 24vh, 306px) !important; + padding: clamp(22px, 2.2vw, 28px) clamp(24px, 2.6vw, 32px) clamp(18px, 2vw, 24px) !important; + border-radius: clamp(26px, 2.2vw, 32px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + min-height: clamp(118px, 13vh, 162px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-set { + width: min(372px, calc(100vw - 48px)) !important; + max-width: min(372px, calc(100vw - 48px)) !important; + padding: 13px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-set > .ecom-command-count-row { + width: min(100%, 334px) !important; + margin-inline: auto !important; + grid-template-columns: minmax(0, 1fr) 82px !important; + padding: 9px 10px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-model { + width: min(544px, calc(100vw - 48px)) !important; + max-width: min(544px, calc(100vw - 48px)) !important; + max-height: none !important; + grid-template-columns: minmax(214px, 0.9fr) minmax(0, 1fr) !important; + gap: 12px !important; + padding: 15px !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model header { + padding-bottom: 6px !important; + border-bottom: 1px solid rgba(30, 189, 219, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model { + max-height: none !important; + overflow: visible !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile::-webkit-scrollbar, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model::-webkit-scrollbar, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile { + display: grid !important; + align-content: start !important; + gap: 8px !important; + padding: 10px !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 16px !important; + background: rgba(248, 253, 255, 0.58) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile__title { + margin: 0 0 1px !important; + color: rgba(16, 32, 44, 0.88) !important; + font-size: 13px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile section { + display: grid !important; + grid-template-columns: 36px minmax(0, 1fr) !important; + align-items: start !important; + gap: 8px !important; + padding: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile section > strong { + padding-top: 7px !important; + color: rgba(16, 115, 204, 0.66) !important; + font-size: 12px !important; + line-height: 1.2 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile section > div { + display: flex !important; + flex-wrap: wrap !important; + gap: 6px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model { + align-content: start !important; + padding: 10px !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 16px !important; + background: rgba(248, 253, 255, 0.58) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-module-grid--model button { + min-height: 36px !important; + border-radius: 13px !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle.ecom-command-history__toggle { + transition: + border-color 180ms ease, + background 180ms ease, + color 180ms ease, + box-shadow 180ms ease, + transform 220ms cubic-bezier(0.16, 1, 0.3, 1), + opacity 180ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle.ecom-command-history__toggle:hover { + border-color: rgba(30, 189, 219, 0.46) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(235, 252, 255, 0.92)) !important; + color: #1073cc !important; + box-shadow: + 0 18px 38px rgba(16, 115, 204, 0.16), + 0 0 0 4px rgba(30, 189, 219, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; + opacity: 1 !important; + transform: translateY(-2px) scale(1.035) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"].is-history-collapsed .ecom-command-history__toggle.ecom-command-history__toggle:hover { + transform: translateY(-2px) translateX(-2px) scale(1.035) !important; +} + +@media (min-width: 1440px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: min(1180px, calc(100vw - 152px)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: clamp(276px, 25vh, 334px) !important; + } +} + +@media (min-width: 761px) and (max-width: 1180px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: min(1000px, calc(100vw - 72px)) !important; + } +} + +@media (max-width: 760px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: min(100%, calc(100vw - 28px)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: clamp(220px, 36vh, 278px) !important; + padding: 16px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + min-height: clamp(96px, 20vh, 132px) !important; + } +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-model { + max-height: min(520px, calc(100dvh - 170px)) !important; + overflow-y: auto !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.2) transparent !important; + } +} + +/* #/imageWorkbench final balance: keep the original composer height while letting width breathe. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: min(1088px, calc(100vw - clamp(72px, 11vw, 176px))) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: clamp(218px, 18vh, 238px) !important; + padding: 20px 24px 18px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + min-height: clamp(92px, 10vh, 118px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-model .ecom-command-model-profile section > strong { + color: rgba(16, 32, 44, 0.56) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle.ecom-command-history__toggle:hover { + color: rgba(16, 32, 44, 0.62) !important; + background: rgba(255, 255, 255, 0.86) !important; + border-color: rgba(30, 189, 219, 0.22) !important; + box-shadow: + 0 18px 38px rgba(16, 115, 204, 0.14), + 0 0 0 4px rgba(30, 189, 219, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__toggle.ecom-command-history__toggle:hover .anticon { + color: inherit !important; +} + +@media (min-width: 1440px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: clamp(222px, 18vh, 246px) !important; + } +} + +@media (max-width: 760px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap { + width: min(100%, calc(100vw - 28px)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: clamp(214px, 32vh, 250px) !important; + padding: 16px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + min-height: clamp(86px, 18vh, 112px) !important; + } +} + +/* #/imageWorkbench command surface refinement: quieter hierarchy for daily SaaS usage. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + gap: 14px !important; + padding-top: 13px !important; + border-top-color: rgba(30, 189, 219, 0.085) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row { + gap: 8px !important; + align-items: center !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) { + min-height: 38px !important; + padding: 0 12px !important; + border-color: rgba(30, 189, 219, 0.14) !important; + border-radius: 14px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 252, 254, 0.78)) !important; + color: rgba(16, 32, 44, 0.76) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.72), + 0 8px 18px rgba(16, 115, 204, 0.035) !important; + transition: + border-color 160ms ease, + background 160ms ease, + color 160ms ease, + box-shadow 180ms ease, + transform 180ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline) > span:not(.ecom-command-option-icon) { + color: rgba(16, 32, 44, 0.46) !important; + font-weight: 650 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row .ecom-command-option-icon { + width: 21px !important; + height: 21px !important; + border-color: rgba(30, 189, 219, 0.1) !important; + background: rgba(232, 249, 253, 0.62) !important; + color: rgba(15, 130, 155, 0.82) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline):hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row button:not(.ecom-command-reference--inline).is-active { + border-color: rgba(30, 189, 219, 0.34) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(238, 251, 254, 0.9)) !important; + color: rgba(16, 32, 44, 0.9) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.84), + 0 11px 24px rgba(16, 115, 204, 0.065) !important; + transform: translateY(-1px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline { + width: 46px !important; + min-width: 46px !important; + max-width: 46px !important; + height: 38px !important; + min-height: 38px !important; + border-radius: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline::before { + display: none !important; + content: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline > span { + display: inline-grid !important; + width: 30px !important; + min-width: 30px !important; + height: 30px !important; + place-items: center !important; + margin: 0 !important; + overflow: visible !important; + border: 0 !important; + border-radius: 11px !important; + background: linear-gradient(180deg, rgba(232, 250, 254, 0.96), rgba(212, 244, 250, 0.88)) !important; + color: #0f829b !important; + font-size: 20px !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--inline .anticon { + display: inline-flex !important; + color: inherit !important; + font-size: 20px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--mode { + display: grid !important; + grid-template-columns: repeat(2, minmax(190px, 1fr)) !important; + grid-auto-flow: row !important; + justify-items: stretch !important; + gap: 9px !important; + width: min(460px, calc(100vw - 56px)) !important; + padding: 10px !important; + border-radius: 18px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button { + display: grid !important; + grid-template-columns: 32px minmax(0, 1fr) !important; + grid-template-rows: auto auto !important; + align-items: center !important; + justify-items: start !important; + column-gap: 8px !important; + row-gap: 1px !important; + width: 100% !important; + min-height: 58px !important; + padding: 9px 10px !important; + border: 0 !important; + border-radius: 14px !important; + text-align: left !important; + background: + radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--mode-accent, #1ebddb) 16%, transparent), transparent 42%), + linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(245, 252, 254, 0.74)) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 8px 18px rgba(16, 115, 204, 0.045) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button:has(.ecom-command-mode-icon--hot) { + grid-column: 1 / -1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button.is-active, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button:hover { + color: rgba(16, 32, 44, 0.92) !important; + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--mode-accent, #1ebddb) 36%, transparent), + 0 12px 26px color-mix(in srgb, var(--mode-accent, #1ebddb) 14%, transparent) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-icon { + grid-row: 1 / span 2 !important; + display: inline-grid !important; + width: 32px !important; + height: 32px !important; + place-items: center !important; + border-radius: 12px !important; + color: var(--mode-accent, #1073cc) !important; + background: color-mix(in srgb, var(--mode-accent, #1073cc) 13%, #ffffff) !important; + font-size: 16px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button:has(.ecom-command-mode-icon--set) { + --mode-accent: #0f8f72; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button:has(.ecom-command-mode-icon--detail) { + --mode-accent: #7a5af8; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button:has(.ecom-command-mode-icon--model) { + --mode-accent: #1073cc; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button:has(.ecom-command-mode-icon--video) { + --mode-accent: #cc6b14; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button:has(.ecom-command-mode-icon--hot) { + --mode-accent: #c04468; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button strong { + min-width: 0 !important; + color: rgba(16, 32, 44, 0.86) !important; + font-size: 13px !important; + font-weight: 820 !important; + line-height: 1.15 !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--mode button em { + min-width: 0 !important; + overflow: hidden !important; + color: rgba(16, 32, 44, 0.45) !important; + font-size: 10px !important; + font-style: normal !important; + font-weight: 650 !important; + line-height: 1.2 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker { + grid-template-columns: repeat(auto-fit, minmax(154px, 1fr)) !important; + gap: 8px !important; + width: min(420px, calc(100vw - 56px)) !important; + padding: 10px !important; + border-radius: 18px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--ratio-picker button { + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 9px !important; + min-height: 52px !important; + padding: 8px 10px !important; + border: 0 !important; + border-radius: 14px !important; + text-align: left !important; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 250, 253, 0.78)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ratio-icon { + display: inline-grid !important; + width: 30px !important; + height: 30px !important; + place-items: center !important; + flex: 0 0 30px !important; + border-radius: 11px !important; + color: #1073cc !important; + background: rgba(226, 246, 252, 0.9) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ratio-copy { + display: grid !important; + min-width: 0 !important; + gap: 4px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ratio-copy strong { + min-width: 0 !important; + overflow: hidden !important; + color: rgba(16, 32, 44, 0.82) !important; + font-size: 12px !important; + font-weight: 820 !important; + line-height: 1.15 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-ratio-copy em { + display: inline-grid !important; + width: max-content !important; + min-width: 40px !important; + height: 18px !important; + place-items: center !important; + padding: 0 7px !important; + border-radius: 999px !important; + color: #0f829b !important; + background: rgba(222, 248, 252, 0.94) !important; + font-size: 10px !important; + font-style: normal !important; + font-weight: 820 !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send { + width: 48px !important; + height: 48px !important; + min-width: 48px !important; + border-radius: 16px !important; + transition: + border-color 180ms ease, + background 180ms ease, + box-shadow 180ms ease, + color 180ms ease, + transform 180ms ease, + opacity 180ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send:not(:disabled) { + border-color: rgba(16, 115, 204, 0.18) !important; + background: + linear-gradient(135deg, #1073cc 0%, #1ebddb 100%) !important; + box-shadow: + 0 16px 34px rgba(30, 189, 219, 0.24), + inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send:not(:disabled):hover { + box-shadow: + 0 20px 42px rgba(30, 189, 219, 0.3), + 0 0 0 4px rgba(30, 189, 219, 0.09), + inset 0 1px 0 rgba(255, 255, 255, 0.38) !important; + transform: translateY(-1px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-send-button.ecom-command-send:disabled { + border: 1px solid rgba(30, 189, 219, 0.11) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(244, 252, 254, 0.68)) !important; + color: rgba(16, 32, 44, 0.22) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.72), + 0 10px 22px rgba(16, 115, 204, 0.035) !important; + cursor: default !important; + opacity: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board { + position: relative !important; + display: grid !important; + grid-template-columns: repeat(5, 1fr) !important; + gap: 10px !important; + min-height: 0 !important; + padding: 0 !important; + overflow: visible !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board::before { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button { + min-height: 72px !important; + padding: 12px 10px !important; + gap: 8px !important; + border: 0 !important; + border-radius: 16px !important; + background: + radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--quick-accent) 18%, transparent), transparent 38%), + linear-gradient(135deg, rgba(255, 255, 255, 0.94), var(--quick-bg)) !important; + color: var(--quick-text) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 10px 24px rgba(16, 32, 44, 0.04) !important; + transition: + background 170ms ease, + color 170ms ease, + box-shadow 180ms ease, + transform 180ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button::before, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button::after { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button:hover { + background: + radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--quick-accent) 28%, transparent), transparent 40%), + linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--quick-bg) 84%, #ffffff)) !important; + color: var(--quick-accent) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.78), + 0 16px 32px color-mix(in srgb, var(--quick-accent) 14%, transparent) !important; + transform: translateY(-2px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span { + width: 34px !important; + height: 34px !important; + border: 0 !important; + border-radius: 12px !important; + background: + linear-gradient(180deg, color-mix(in srgb, var(--quick-accent) 18%, #ffffff), color-mix(in srgb, var(--quick-accent) 8%, #ffffff)) !important; + color: var(--quick-accent) !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button:hover > span { + color: var(--quick-accent) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 10px 22px color-mix(in srgb, var(--quick-accent) 18%, transparent) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--detail { + --quick-accent: #7a5af8; + --quick-bg: #f1edff; + --quick-text: #2f245d; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit { + --quick-accent: #cc6b14; + --quick-bg: #fff2e5; + --quick-text: #4e2c11; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout { + --quick-accent: #1073cc; + --quick-bg: #eaf5ff; + --quick-text: #123454; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark { + --quick-accent: #c04468; + --quick-bg: #fff0f5; + --quick-text: #542234; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--translate { + --quick-accent: #0891b2; + --quick-bg: #ecfeff; + --quick-text: #164e63; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .anticon, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board svg { + border: 0 !important; + outline: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span { + background: transparent !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button:hover > span { + background: transparent !important; + box-shadow: none !important; +} + +@media (max-width: 980px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + min-height: 0 !important; + } +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__heading { + border-color: rgba(30, 189, 219, 0.1) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 253, 254, 0.72)) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__empty { + display: grid !important; + min-height: 78px !important; + place-items: center !important; + border: 1px dashed rgba(30, 189, 219, 0.18) !important; + border-radius: 16px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 253, 254, 0.54)) !important; + color: rgba(16, 32, 44, 0.42) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.66) !important; +} + +@media (max-width: 760px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + padding: 10px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button { + min-height: 58px !important; + } +} + +/* #/imageWorkbench uploaded-asset balance: keep thumbnails useful without making the composer feel oversized. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + grid-template-rows: 58px minmax(46px, auto) auto !important; + row-gap: 7px !important; + min-height: clamp(232px, 19vh, 252px) !important; + padding: 20px 24px 18px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + min-height: 54px !important; + max-height: 58px !important; + padding-left: 0 !important; + gap: 8px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex-basis: 54px !important; + width: 54px !important; + height: 54px !important; + border-radius: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add { + flex-basis: 34px !important; + width: 34px !important; + height: 34px !important; + min-height: 34px !important; + margin-top: 10px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + min-height: 50px !important; + max-height: 68px !important; + padding-top: 4px !important; +} + +/* #/imageWorkbench detail popover and topbar blend: no inner scrollbar, no hard header split. */ +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar { + border-bottom-color: transparent !important; + background: + radial-gradient(48rem 14rem at 50% 100%, rgba(30, 189, 219, 0.09), transparent 72%), + radial-gradient(28rem 12rem at 12% 100%, rgba(16, 115, 204, 0.045), transparent 68%), + linear-gradient(180deg, #fbfdfe 0%, #f8fbfc 100%) !important; + box-shadow: none !important; + backdrop-filter: none !important; + -webkit-backdrop-filter: none !important; +} + +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar::after { + position: absolute !important; + right: 0 !important; + bottom: -1px !important; + left: 0 !important; + height: 1px !important; + background: linear-gradient(90deg, transparent, rgba(30, 189, 219, 0.08), transparent) !important; + content: "" !important; + pointer-events: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-detail { + width: min(468px, calc(100vw - 48px)) !important; + max-width: min(468px, calc(100vw - 48px)) !important; + max-height: none !important; + padding: 13px !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail header { + min-height: 24px !important; + margin-bottom: 0 !important; + padding-bottom: 4px !important; + border-bottom: 1px solid rgba(30, 189, 219, 0.08) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail { + display: grid !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + gap: 7px !important; + max-height: none !important; + overflow: visible !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail::-webkit-scrollbar, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail button { + min-height: 43px !important; + padding: 7px 9px !important; + border-radius: 13px !important; + align-content: center !important; + gap: 2px !important; + text-align: center !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail button strong, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail button span { + max-width: 100% !important; + overflow: hidden !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail button strong { + font-size: 12px !important; + line-height: 1.25 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail button span { + font-size: 10px !important; + line-height: 1.25 !important; +} + +@media (max-width: 760px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings-detail { + overflow: auto !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-popover--settings-detail .ecom-command-module-grid--detail { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} + +/* #/imageWorkbench topbar seamless blend: the header floats over the same canvas instead of reading as a separate band. */ +html body #root .ecommerce-standalone.web-shell { + background: + radial-gradient(circle at 19% 8%, rgba(30, 189, 219, 0.13), transparent 24rem), + radial-gradient(circle at 82% 11%, rgba(16, 115, 204, 0.09), transparent 26rem), + linear-gradient(180deg, #fbfdfe 0%, #f8f9fa 54%, #f5f9fb 100%) !important; +} + +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar { + background: transparent !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar::after { + content: none !important; +} + +/* #/imageWorkbench inspiration shelves below the toolbox. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview:has(.ecom-inspiration-lab) { + overflow-x: hidden !important; + overflow-y: auto !important; + padding-bottom: 88px !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.2) transparent !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview:has(.ecom-inspiration-lab)::-webkit-scrollbar { + width: 8px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview:has(.ecom-inspiration-lab)::-webkit-scrollbar-thumb { + border: 2px solid transparent !important; + border-radius: 999px !important; + background: rgba(16, 115, 204, 0.18) !important; + background-clip: content-box !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab).is-before-generate { + top: clamp(96px, 11vh, 132px) !important; + transform: translateX(-50%) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) { + width: min(1220px, calc(100vw - clamp(64px, 8vw, 148px))) !important; + gap: 16px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab { + width: min(100%, 1088px) !important; + margin-inline: auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab { + display: grid !important; + gap: 12px !important; + padding: 4px 0 24px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs { + display: flex !important; + align-items: center !important; + gap: 6px !important; + min-height: 34px !important; + padding: 0 2px !important; + overflow-x: auto !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs::-webkit-scrollbar { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs button { + flex: 0 0 auto !important; + min-height: 30px !important; + padding: 0 12px !important; + border: 1px solid transparent !important; + border-radius: 999px !important; + background: transparent !important; + color: rgba(16, 32, 44, 0.54) !important; + font-size: 12px !important; + font-weight: 760 !important; + cursor: pointer !important; + transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs button.is-active { + border-color: rgba(30, 189, 219, 0.16) !important; + background: rgba(255, 255, 255, 0.72) !important; + color: rgba(16, 32, 44, 0.88) !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.045) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-rows { + display: grid !important; + gap: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row { + display: grid !important; + grid-template-columns: 112px minmax(0, 1fr) !important; + gap: 14px !important; + min-height: 168px !important; + padding: 14px !important; + border: 1px solid rgba(30, 189, 219, 0.1) !important; + border-radius: 22px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(247, 253, 254, 0.66)), + rgba(255, 255, 255, 0.74) !important; + box-shadow: + 0 20px 54px rgba(16, 115, 204, 0.06), + inset 0 1px 0 rgba(255, 255, 255, 0.76) !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__meta { + display: grid !important; + grid-template-rows: auto auto 1fr !important; + align-content: start !important; + gap: 7px !important; + min-width: 0 !important; + padding: 10px 6px 8px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__meta strong { + color: rgba(16, 32, 44, 0.9) !important; + font-size: 15px !important; + font-weight: 860 !important; + line-height: 1.2 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__meta span { + color: rgba(16, 32, 44, 0.45) !important; + font-size: 12px !important; + line-height: 1.45 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__controls { + display: flex !important; + align-self: end !important; + gap: 8px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__controls button { + display: inline-grid !important; + width: 30px !important; + height: 30px !important; + place-items: center !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 999px !important; + background: rgba(255, 255, 255, 0.72) !important; + color: rgba(16, 32, 44, 0.54) !important; + cursor: pointer !important; + transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__controls button:hover { + border-color: rgba(30, 189, 219, 0.28) !important; + background: rgba(235, 251, 254, 0.92) !important; + color: rgba(16, 115, 204, 0.82) !important; + transform: translateY(-1px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-strip { + display: grid !important; + grid-auto-flow: column !important; + grid-auto-columns: minmax(260px, 1fr) !important; + gap: 10px !important; + min-width: 0 !important; + overflow-x: auto !important; + overflow-y: hidden !important; + overscroll-behavior-x: contain !important; + scroll-snap-type: x proximity !important; + scrollbar-width: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-strip::-webkit-scrollbar { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card { + position: relative !important; + display: flex !important; + flex-direction: column !important; + justify-content: flex-end !important; + min-height: 210px !important; + padding: 0 !important; + border: 1px solid rgba(30, 189, 219, 0.09) !important; + border-radius: 16px !important; + background: #edf8fb !important; + scroll-snap-align: start !important; + overflow: hidden !important; + cursor: pointer !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card__visual { + position: absolute !important; + inset: 0 !important; + height: 100% !important; + min-height: 0 !important; + overflow: hidden !important; + border-radius: 0 !important; + background: #edf8fb !important; + transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card:hover .ecom-inspiration-card__visual { + transform: scale(1.04) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card__visual img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card__visual video { + display: block !important; + width: 100% !important; + height: 100% !important; + object-fit: cover !important; + object-position: center !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card strong { + position: relative !important; + z-index: 2 !important; + margin-top: 0 !important; + padding: 0 14px !important; + overflow: hidden !important; + color: #fff !important; + font-size: 14px !important; + font-weight: 820 !important; + line-height: 1.28 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important; + opacity: 0 !important; + transform: translateY(8px) !important; + transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card:hover strong { + opacity: 1 !important; + transform: translateY(0) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card p { + position: relative !important; + z-index: 2 !important; + margin: 3px 0 0 !important; + padding: 0 14px 14px !important; + overflow: hidden !important; + color: rgba(255, 255, 255, 0.78) !important; + font-size: 11px !important; + line-height: 1.4 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important; + opacity: 0 !important; + transform: translateY(8px) !important; + transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.04s, transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) 0.04s !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card:hover p { + opacity: 1 !important; + transform: translateY(0) !important; +} + +/* hover 底部渐变遮罩 */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card::after { + content: "" !important; + position: absolute !important; + inset: 0 !important; + z-index: 1 !important; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0) 55%) !important; + opacity: 0 !important; + transition: opacity 0.36s cubic-bezier(0.16, 1, 0.3, 1) !important; + pointer-events: none !important; + border-radius: 16px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card:hover::after { + opacity: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-card em { + position: absolute !important; + top: 12px !important; + right: 14px !important; + z-index: 3 !important; + color: rgba(255, 255, 255, 0.55) !important; + font-size: 10px !important; + font-style: normal !important; + font-weight: 800 !important; + text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--team .ecom-inspiration-strip { + grid-auto-columns: minmax(300px, 1fr) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--team .ecom-inspiration-card { + min-height: 210px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--listing .ecom-inspiration-card { + min-height: 260px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--video .ecom-inspiration-card { + min-height: 492px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--video .ecom-inspiration-card__visual { + inset: 0 !important; + height: 100% !important; + min-height: 0 !important; + aspect-ratio: auto !important; + background: #edf8fb !important; +} + +/* ── Inspiration fullscreen preview ── */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-preview { + position: fixed !important; + inset: 0 !important; + z-index: 9999 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + animation: ecom-preview-fade-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +@keyframes ecom-preview-fade-in { + from { opacity: 0; } + to { opacity: 1; } +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-preview__backdrop { + position: absolute !important; + inset: 0 !important; + background: rgba(0, 0, 0, 0.72) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-preview__content { + position: relative !important; + z-index: 1 !important; + max-width: 90vw !important; + max-height: 90vh !important; + animation: ecom-preview-scale-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +@keyframes ecom-preview-scale-in { + from { opacity: 0; transform: scale(0.92); } + to { opacity: 1; transform: scale(1); } +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-preview__media { + display: block !important; + max-width: 90vw !important; + max-height: 85vh !important; + border-radius: 16px !important; + object-fit: contain !important; + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-preview__close { + position: absolute !important; + top: -14px !important; + right: -14px !important; + z-index: 2 !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + width: 36px !important; + height: 36px !important; + border: 0 !important; + border-radius: 50% !important; + background: rgba(255, 255, 255, 0.92) !important; + color: #1a2a3a !important; + font-size: 16px !important; + line-height: 1 !important; + cursor: pointer !important; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18) !important; + transition: background 0.2s, transform 0.2s !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-preview__close:hover { + background: #fff !important; + transform: scale(1.1) !important; +} + +body .ecom-inspiration-preview { + position: fixed !important; + inset: 0 !important; + z-index: 2147483000 !important; + display: grid !important; + place-items: center !important; + padding: 32px !important; + overflow: hidden !important; + background: rgba(8, 18, 28, 0.62) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + animation: ecom-preview-fade-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +body .ecom-inspiration-preview__backdrop { + position: absolute !important; + inset: 0 !important; +} + +body .ecom-inspiration-preview__content { + position: relative !important; + z-index: 1 !important; + display: grid !important; + place-items: center !important; + max-width: min(1280px, calc(100vw - 64px)) !important; + max-height: calc(100vh - 64px) !important; + overflow: hidden !important; + border-radius: 16px !important; + box-shadow: 0 24px 80px rgba(0, 0, 0, 0.34) !important; + animation: ecom-preview-scale-in 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important; +} + +body .ecom-inspiration-preview__media { + display: block !important; + width: auto !important; + height: auto !important; + max-width: min(1280px, calc(100vw - 64px)) !important; + max-height: calc(100vh - 64px) !important; + object-fit: contain !important; + border-radius: 16px !important; +} + +body .ecom-inspiration-preview__close { + display: none !important; +} + +/* 灵感预览：右下角"使用此提示词"动作条，避开视频底部控制条。 */ +body .ecom-inspiration-preview__actions { + position: absolute !important; + right: 16px !important; + bottom: 16px !important; + z-index: 2 !important; + display: flex !important; + gap: 10px !important; +} + +body .ecom-inspiration-preview__use-prompt { + display: inline-flex !important; + align-items: center !important; + gap: 8px !important; + padding: 10px 20px !important; + border: 1px solid rgba(255, 255, 255, 0.28) !important; + border-radius: 999px !important; + background: rgba(16, 32, 44, 0.72) !important; + backdrop-filter: blur(8px) !important; + -webkit-backdrop-filter: blur(8px) !important; + color: #ffffff !important; + font-size: 14px !important; + font-weight: 600 !important; + cursor: pointer !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important; + transition: background 160ms ease, transform 160ms ease, border-color 160ms ease !important; +} + +body .ecom-inspiration-preview__use-prompt:hover { + border-color: rgba(30, 189, 219, 0.6) !important; + background: rgba(30, 189, 219, 0.92) !important; + transform: translateY(-1px) !important; +} + +@media (max-width: 760px) { + body .ecom-inspiration-preview { + padding: 14px !important; + } + + body .ecom-inspiration-preview__content, + body .ecom-inspiration-preview__media { + max-width: calc(100vw - 28px) !important; + max-height: calc(100vh - 28px) !important; + } +} + +@media (min-width: 1440px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) { + width: min(1360px, calc(100vw - 132px)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab { + width: min(100%, 1280px) !important; + } +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row { + grid-template-columns: minmax(0, 1fr) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__meta { + grid-template-columns: minmax(0, 1fr) auto !important; + grid-template-rows: auto auto !important; + padding: 2px 2px 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__controls { + grid-column: 2 !important; + grid-row: 1 / span 2 !important; + align-self: center !important; + } +} + +/* #/imageWorkbench inspiration shelves final sizing: make the case shelves immersive without stretching the composer. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:has(.ecom-inspiration-lab) { + --ecom-history-offset: 0px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) { + width: min(1440px, calc(100% - clamp(28px, 2.6vw, 44px))) !important; + padding-inline: clamp(12px, 1.55vw, 24px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab).is-before-generate { + top: clamp(20px, 3vh, 34px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board { + width: min(100%, 1088px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board { + width: min(100%, 820px) !important; + min-height: 0 !important; + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + align-items: stretch !important; + gap: 10px !important; + margin-inline: auto !important; + padding: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button { + min-height: 58px !important; + justify-content: center !important; + padding: 0 14px !important; + gap: 8px !important; + border-radius: 14px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span { + width: 28px !important; + height: 28px !important; + flex: 0 0 28px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board strong { + font-size: 13px !important; + line-height: 1.2 !important; + white-space: nowrap !important; +} + +@media (max-width: 760px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board { + width: min(100%, 480px) !important; + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab { + position: relative !important; + width: 100% !important; + max-width: 1400px !important; + margin-inline: auto !important; + padding: 8px clamp(4px, 0.8vw, 12px) 28px !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab::before { + content: "" !important; + position: absolute !important; + z-index: -1 !important; + inset: 22px calc(clamp(4px, 0.8vw, 12px) * -1) 4px !important; + border-radius: 30px !important; + background: + linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72) 12%, rgba(255, 255, 255, 0.72) 88%, rgba(255, 255, 255, 0)), + linear-gradient(180deg, rgba(245, 252, 254, 0.4), rgba(245, 249, 251, 0.08)) !important; + pointer-events: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs { + padding-inline: clamp(4px, 0.7vw, 10px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row { + grid-template-columns: clamp(112px, 9.5vw, 142px) minmax(0, 1fr) !important; + gap: clamp(14px, 1.25vw, 20px) !important; + padding: clamp(14px, 1.15vw, 18px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-strip { + grid-auto-columns: minmax(252px, 0.25fr) !important; + gap: clamp(10px, 0.85vw, 14px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--team .ecom-inspiration-strip { + grid-auto-columns: minmax(286px, 0.25fr) !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) { + width: min(100%, calc(100vw - 24px)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab { + padding-inline: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row { + grid-template-columns: minmax(0, 1fr) !important; + } +} + +/* #/imageWorkbench spacing correction: keep the generation composer close to the original first-screen position. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview:has(.ecom-inspiration-lab) { + padding-top: clamp(18px, 2.5vh, 30px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) { + gap: clamp(12px, 1.25vw, 16px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab).is-before-generate { + top: clamp(8px, 1.35vh, 14px) !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-preview.clone-ai-preview:has(.ecom-inspiration-lab) { + padding-top: 12px !important; + } + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab).is-before-generate { + top: 8px !important; +} +} + +/* Ecommerce viewport fit: keep standalone tool pages inside the visible app area. */ +body.ecommerce-standalone-body, +body.ecommerce-standalone-body #root { + width: 100% !important; + height: 100% !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell { + --ecommerce-topbar-height: 66px; + width: 100% !important; + height: 100dvh !important; + min-height: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__topbar { + min-height: var(--ecommerce-topbar-height) !important; +} + +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__content { + box-sizing: content-box !important; + height: calc(100dvh - var(--ecommerce-topbar-height)) !important; + min-height: 0 !important; + padding-top: var(--ecommerce-topbar-height) !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__content > .error-boundary, +html body #root .ecommerce-standalone.web-shell .ecommerce-standalone__content .product-clone-page, +html body #root .ecommerce-standalone.web-shell .product-clone-page > .product-clone-shell { + height: 100% !important; + min-height: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-smart-cutout-page, +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-quick-set-page, +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-watermark-page { + --ecom-history-offset: 0px !important; + --ecom-history-panel-width: 0px !important; + box-sizing: border-box !important; + width: 100% !important; + height: 100% !important; + min-height: 0 !important; + padding-right: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-translate-page { + --ecom-history-offset: 0px !important; + --ecom-history-panel-width: 0px !important; + box-sizing: border-box !important; + width: 100% !important; + height: 100% !important; + min-height: 0 !important; + padding-right: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-smart-cutout-page > .product-clone-shell, +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-quick-set-page > .product-clone-shell, +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-watermark-page > .product-clone-shell, +html body #root .ecommerce-standalone.web-shell .product-clone-page[data-tool="clone"].is-translate-page > .product-clone-shell { + box-sizing: border-box !important; + width: 100% !important; + max-width: none !important; + padding-right: 0 !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-smart-cutout-page, +html body #root .ecommerce-standalone.web-shell .ecom-watermark-page, +html body #root .ecommerce-standalone.web-shell .ecom-translate-page, +html body #root .ecommerce-standalone.web-shell .ecom-quick-set-page { + box-sizing: border-box !important; + width: 100% !important; + max-width: none !important; + height: 100% !important; + min-height: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-smart-cutout-page.is-upload { + display: grid !important; + grid-template-rows: minmax(0, 1fr) !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-smart-cutout-nav { + position: absolute !important; + top: 18px !important; + left: 24px !important; + margin: 0 !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-smart-cutout-upload { + box-sizing: border-box !important; + width: 100% !important; + height: 100% !important; + min-height: 0 !important; + align-content: center !important; + justify-items: center !important; + padding: clamp(78px, 8vh, 104px) clamp(24px, 4vw, 48px) clamp(28px, 5vh, 56px) !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-smart-cutout-upload__body { + justify-content: center !important; + align-items: stretch !important; + margin-inline: auto !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-quick-set-body { + height: 100% !important; + min-height: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-quick-set-panel { + min-height: 0 !important; + overflow-y: auto !important; + scrollbar-width: none !important; + -ms-overflow-style: none !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-quick-set-panel::-webkit-scrollbar { + width: 0 !important; + height: 0 !important; + display: none !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-quick-set-stage { + min-height: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-quick-set-canvas { + min-height: 0 !important; + overflow: hidden !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-watermark-page { + grid-template-columns: minmax(320px, 350px) minmax(0, 1fr) !important; + padding-top: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + padding-bottom: 0 !important; + gap: 0 !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-translate-page { + grid-template-columns: minmax(320px, 350px) minmax(0, 1fr) !important; + padding-top: 0 !important; + padding-left: 0 !important; + padding-right: 0 !important; + padding-bottom: 0 !important; + gap: 0 !important; +} + +html body #root .ecommerce-standalone.web-shell .ecom-watermark-side, +html body #root .ecommerce-standalone.web-shell .ecom-watermark-workspace { + min-height: 0 !important; + overflow: hidden !important; +} + +@media (max-width: 1020px) { + html body #root .ecommerce-standalone.web-shell .ecom-smart-cutout-upload { + overflow: auto !important; + } +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.web-shell { + --ecommerce-topbar-height: 62px; + } +} + +/* Preview modal actions stay inside the deliberate image inspection moment. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-modal { + gap: 14px !important; + border-color: rgba(30, 189, 219, 0.16) !important; + box-shadow: + 0 26px 72px rgba(16, 32, 44, 0.18), + 0 8px 24px rgba(16, 115, 204, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.86) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer { + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 16px !important; + min-width: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer strong { + min-width: 0 !important; + overflow: hidden !important; + color: #10202c !important; + font-size: 15px !important; + font-weight: 800 !important; + line-height: 1.4 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions { + display: inline-flex !important; + align-items: center !important; + justify-content: flex-end !important; + gap: 10px !important; + flex: 0 0 auto !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action { + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 7px !important; + height: 38px !important; + min-height: 38px !important; + padding: 0 14px !important; + border: 1px solid rgba(30, 189, 219, 0.2) !important; + border-radius: 999px !important; + color: #1073cc !important; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(241, 251, 253, 0.92)) !important; + box-shadow: + 0 8px 18px rgba(16, 115, 204, 0.08), + inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; + font-size: 14px !important; + font-weight: 750 !important; + cursor: pointer !important; + transition: + border-color 160ms ease, + color 160ms ease, + background 160ms ease, + transform 160ms ease, + box-shadow 160ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action:focus-visible { + border-color: rgba(30, 189, 219, 0.42) !important; + background: #ffffff !important; + outline: none !important; + transform: translateY(-1px) !important; + box-shadow: + 0 12px 24px rgba(16, 115, 204, 0.12), + inset 0 1px 0 rgba(255, 255, 255, 0.94) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger { + border-color: rgba(255, 77, 79, 0.16) !important; + color: #d84a4d !important; + background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 246, 0.94)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action--danger:focus-visible { + border-color: rgba(255, 77, 79, 0.28) !important; + color: #c93639 !important; +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-footer { + align-items: stretch !important; + flex-direction: column !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-actions { + justify-content: stretch !important; + width: 100% !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-set-preview-action { + flex: 1 1 0 !important; + } +} + +/* History record detail: compact composer becomes a stable summary bar, then expands on click. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail { + --history-detail-workspace-width: calc(100vw - var(--ecom-history-panel-width, 292px)); +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact { + position: fixed !important; + top: calc(var(--ecommerce-topbar-height, 66px) + clamp(0px, 0.6vh, 6px)) !important; + left: calc(var(--history-detail-workspace-width) / 2) !important; + width: min(760px, calc(var(--history-detail-workspace-width) - clamp(48px, 8vw, 96px))) !important; + gap: 0 !important; + transform: translateX(-50%) !important; + z-index: 72 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-title { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + display: grid !important; + grid-template-columns: auto minmax(0, 1fr) auto !important; + grid-template-rows: minmax(64px, auto) !important; + align-items: center !important; + column-gap: 16px !important; + min-height: clamp(68px, 8.8vh, 82px) !important; + max-height: 86px !important; + padding: clamp(8px, 1.2vh, 10px) 12px clamp(8px, 1.2vh, 10px) 16px !important; + overflow: hidden !important; + border: 1px solid rgba(30, 189, 219, 0.16) !important; + border-radius: 999px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 253, 254, 0.94)), + #feffff !important; + box-shadow: + 0 18px 46px rgba(16, 115, 204, 0.1), + 0 4px 14px rgba(30, 189, 219, 0.055), + inset 0 1px 0 rgba(255, 255, 255, 0.88) !important; + cursor: text !important; + backdrop-filter: blur(18px) saturate(1.08) !important; + -webkit-backdrop-filter: blur(18px) saturate(1.08) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:focus-within { + border-color: rgba(30, 189, 219, 0.32) !important; + box-shadow: + 0 22px 54px rgba(16, 115, 204, 0.12), + 0 0 0 4px rgba(30, 189, 219, 0.055), + inset 0 1px 0 rgba(255, 255, 255, 0.9) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-reference:not(.ecom-command-reference--inline) { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + grid-column: 1 !important; + grid-row: 1 !important; + align-self: center !important; + display: flex !important; + align-items: center !important; + gap: 8px !important; + width: auto !important; + min-width: 52px !important; + max-width: 160px !important; + min-height: 56px !important; + max-height: 56px !important; + padding: 0 !important; + overflow: hidden !important; + border: 0 !important; + background: transparent !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex: 0 0 54px !important; + width: 54px !important; + height: 54px !important; + border-radius: 18px !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.12) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb video { + border-radius: 18px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb > button { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-add { + flex: 0 0 46px !important; + width: 46px !important; + height: 46px !important; + min-height: 46px !important; + margin: 0 !important; + border-radius: 50% !important; + color: #10202c !important; + background: rgba(16, 32, 44, 0.045) !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + grid-column: 2 !important; + grid-row: 1 !important; + align-self: center !important; + min-height: 34px !important; + max-height: 38px !important; + height: 38px !important; + padding: 4px 0 0 !important; + overflow: hidden !important; + color: rgba(16, 32, 44, 0.72) !important; + background: transparent !important; + font-size: clamp(17px, 1.35vw, 22px) !important; + font-weight: 650 !important; + line-height: 32px !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; + resize: none !important; + opacity: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea::placeholder { + color: rgba(16, 32, 44, 0.48) !important; + opacity: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-toolbar, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-toolbar { + grid-column: 3 !important; + grid-row: 1 !important; + align-self: center !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + min-height: 56px !important; + padding: 0 !important; + overflow: visible !important; + border: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-option-row { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-submit-row { + display: flex !important; + align-items: center !important; + justify-content: center !important; + padding: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send { + width: 58px !important; + height: 58px !important; + min-height: 58px !important; + border-radius: 50% !important; + background: linear-gradient(135deg, #1073cc 0%, #1ebddb 100%) !important; + box-shadow: + 0 14px 28px rgba(16, 115, 204, 0.22), + inset 0 1px 0 rgba(255, 255, 255, 0.32) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send:hover:not(:disabled) { + transform: translateY(-1px) scale(1.02) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"] { + padding-top: clamp(132px, 18vh, 160px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview[data-status="done"]:has(.ecom-command-composer-wrap:not(.is-compact)) { + padding-top: 380px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-preview-zoom-wrap { + display: flex !important; + justify-content: center !important; + width: 100% !important; + min-width: 100% !important; + transform-origin: center top !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-nodes { + display: flex !important; + justify-content: center !important; + box-sizing: border-box !important; + width: 100% !important; + min-width: 0 !important; + min-height: 260px !important; + padding: 22px clamp(20px, 4vw, 48px) 44px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) { + position: relative !important; + top: auto !important; + left: auto !important; + max-width: min(860px, calc(var(--history-detail-workspace-width) - 80px)) !important; + transform: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node .clone-ai-result-grid { + justify-content: center !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item { + isolation: isolate !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete { + position: absolute !important; + top: 50% !important; + right: 14px !important; + z-index: 4 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 34px !important; + height: 34px !important; + min-height: 34px !important; + margin: 0 !important; + padding: 0 !important; + border: 1px solid rgba(30, 189, 219, 0.16) !important; + border-radius: 12px !important; + color: rgba(16, 32, 44, 0.46) !important; + background: rgba(255, 255, 255, 0.86) !important; + box-shadow: + 0 8px 18px rgba(16, 115, 204, 0.075), + inset 0 1px 0 rgba(255, 255, 255, 0.82) !important; + font-size: 14px !important; + line-height: 1 !important; + transform: translateY(-50%) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-history__item .ecom-command-history__item-delete:focus-visible { + color: #ff4d4f !important; + background: rgba(255, 255, 255, 0.95) !important; + border-color: rgba(255, 77, 79, 0.2) !important; + outline: none !important; + transform: translateY(-50%) !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail { + --history-detail-workspace-width: 100vw; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact { + left: 50vw !important; + top: calc(var(--ecommerce-topbar-height, 62px) + 2px) !important; + width: min(720px, calc(100vw - 36px)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + column-gap: 10px !important; + padding-inline: 12px 10px !important; + min-height: 70px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover { + max-width: 116px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail .clone-ai-canvas-node:not(.is-generating) { + max-width: calc(100vw - 32px) !important; + flex-wrap: wrap !important; + } +} + +/* #/imageWorkbench polish: refine quick action surface and widen inspiration shelves for an immersive first page. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board { + width: min(100%, 920px) !important; + padding: 7px !important; + gap: 9px !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(246, 252, 254, 0.52)), + rgba(255, 255, 255, 0.5) !important; + box-shadow: + 0 18px 38px rgba(16, 115, 204, 0.05), + inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--detail, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark { + --quick-accent: #1073cc !important; + --quick-accent-soft: rgba(30, 189, 219, 0.16) !important; + --quick-bg: rgba(245, 252, 254, 0.82) !important; + --quick-text: #163447 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button { + min-height: 56px !important; + border: 1px solid rgba(30, 189, 219, 0.09) !important; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 252, 254, 0.8)) !important; + color: #163447 !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.88), + 0 8px 18px rgba(16, 115, 204, 0.035) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span { + width: 30px !important; + height: 30px !important; + flex: 0 0 30px !important; + border-radius: 11px !important; + background: + linear-gradient(180deg, rgba(30, 189, 219, 0.16), rgba(16, 115, 204, 0.08)) !important; + color: #1073cc !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.74), + 0 7px 16px rgba(16, 115, 204, 0.08) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board strong { + color: #163447 !important; + font-weight: 650 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible { + border-color: rgba(16, 115, 204, 0.18) !important; + background: + radial-gradient(circle at 16% 20%, rgba(30, 189, 219, 0.2), transparent 42%), + linear-gradient(135deg, #ffffff, rgba(241, 250, 253, 0.92)) !important; + color: #1073cc !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.92), + 0 14px 28px rgba(16, 115, 204, 0.08) !important; + outline: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span { + background: + linear-gradient(180deg, rgba(30, 189, 219, 0.22), rgba(16, 115, 204, 0.12)) !important; + color: #0d65b4 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) { + width: min(2360px, calc(100vw - clamp(48px, 4.2vw, 108px))) !important; + max-width: none !important; + padding-inline: clamp(12px, 1.2vw, 22px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab { + width: 100% !important; + max-width: none !important; + padding: 8px 0 30px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-lab::before { + inset: 20px 0 2px !important; + border-radius: 28px !important; + background: + linear-gradient(90deg, rgba(245, 252, 254, 0.18), rgba(255, 255, 255, 0.78) 10%, rgba(255, 255, 255, 0.78) 90%, rgba(245, 252, 254, 0.18)), + linear-gradient(180deg, rgba(245, 252, 254, 0.58), rgba(255, 255, 255, 0.14)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-tabs { + padding-inline: clamp(12px, 1.2vw, 22px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row { + grid-template-columns: clamp(134px, 7vw, 174px) minmax(0, 1fr) !important; + gap: clamp(16px, 1.15vw, 24px) !important; + padding: clamp(14px, 1vw, 20px) clamp(14px, 1.05vw, 22px) !important; + border-color: rgba(16, 115, 204, 0.07) !important; + background: + linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(247, 252, 254, 0.72)) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row__meta { + min-width: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-strip { + grid-auto-columns: clamp(320px, 18.4vw, 470px) !important; + gap: clamp(12px, 0.9vw, 18px) !important; + padding-right: clamp(18px, 1.6vw, 34px) !important; + scroll-padding-inline: clamp(18px, 1.6vw, 34px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--team .ecom-inspiration-strip { + grid-auto-columns: clamp(420px, 24vw, 620px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--listing .ecom-inspiration-strip { + grid-auto-columns: clamp(300px, 16.2vw, 420px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--video .ecom-inspiration-strip { + grid-auto-columns: clamp(360px, 21vw, 540px) !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) { + width: min(100%, calc(100vw - 24px)) !important; + padding-inline: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row { + grid-template-columns: minmax(0, 1fr) !important; + gap: 12px !important; + padding: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-strip, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--team .ecom-inspiration-strip, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--listing .ecom-inspiration-strip, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-inspiration-row--video .ecom-inspiration-strip { + grid-auto-columns: minmax(248px, 76vw) !important; + padding-right: 14px !important; + } +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board { + width: min(100%, 420px) !important; + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button { + padding-inline: 10px !important; + } +} + +/* #/imageWorkbench compact composer centering: when history is collapsed, center on the visible canvas. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed { + --history-detail-workspace-width: 100vw !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact { + left: 50vw !important; + width: min(760px, calc(100vw - clamp(32px, 6vw, 96px))) !important; + transform: translateX(-50%) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + width: 100% !important; + margin-inline: auto !important; +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact { + top: calc(var(--ecommerce-topbar-height, 62px) + 8px) !important; + width: min(100vw - 22px, 560px) !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + grid-template-columns: auto minmax(0, 1fr) auto !important; + column-gap: 8px !important; + min-height: 62px !important; + max-height: 72px !important; + padding: 8px 9px 8px 10px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-popover { + min-width: 42px !important; + max-width: 94px !important; + min-height: 46px !important; + max-height: 46px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-thumb { + flex-basis: 44px !important; + width: 44px !important; + height: 44px !important; + border-radius: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-asset-add { + flex-basis: 34px !important; + width: 34px !important; + height: 34px !important; + min-height: 34px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .ecom-command-composer textarea, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + min-width: 0 !important; + max-height: 32px !important; + font-size: 15px !important; + line-height: 30px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"].is-history-detail.is-history-collapsed .ecom-command-composer-wrap.has-generated.is-compact .clone-ai-send-button.ecom-command-send { + width: 48px !important; + height: 48px !important; + min-height: 48px !important; + } +} + +/* #/imageWorkbench quick actions final tone: restore category colors and align icon tones with labels. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--detail { + --quick-accent: #7a5af8 !important; + --quick-bg: #f1edff !important; + --quick-text: #2f245d !important; + --quick-icon: #5f46d9 !important; + --quick-icon-bg: rgba(122, 90, 248, 0.13) !important; + --quick-border: rgba(122, 90, 248, 0.12) !important; + --quick-shadow: rgba(122, 90, 248, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--edit { + --quick-accent: #cc6b14 !important; + --quick-bg: #fff2e5 !important; + --quick-text: #4e2c11 !important; + --quick-icon: #a95616 !important; + --quick-icon-bg: rgba(204, 107, 20, 0.13) !important; + --quick-border: rgba(204, 107, 20, 0.12) !important; + --quick-shadow: rgba(204, 107, 20, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--cutout { + --quick-accent: #1073cc !important; + --quick-bg: #eaf5ff !important; + --quick-text: #123454 !important; + --quick-icon: #0f66b3 !important; + --quick-icon-bg: rgba(16, 115, 204, 0.13) !important; + --quick-border: rgba(16, 115, 204, 0.12) !important; + --quick-shadow: rgba(16, 115, 204, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board .ecom-command-quick-card--watermark { + --quick-accent: #c04468 !important; + --quick-bg: #fff0f5 !important; + --quick-text: #542234 !important; + --quick-icon: #a63a58 !important; + --quick-icon-bg: rgba(192, 68, 104, 0.13) !important; + --quick-border: rgba(192, 68, 104, 0.12) !important; + --quick-shadow: rgba(192, 68, 104, 0.1) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button { + border-color: var(--quick-border) !important; + background: + radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--quick-accent) 15%, transparent), transparent 40%), + linear-gradient(135deg, rgba(255, 255, 255, 0.96), var(--quick-bg)) !important; + color: var(--quick-text) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.88), + 0 8px 18px rgba(16, 32, 44, 0.032) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span { + background: + linear-gradient(180deg, color-mix(in srgb, var(--quick-icon-bg) 78%, #ffffff), rgba(255, 255, 255, 0.62)) !important; + color: var(--quick-icon) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.82), + 0 7px 16px var(--quick-shadow) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board strong { + color: var(--quick-text) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible { + border-color: color-mix(in srgb, var(--quick-accent) 22%, transparent) !important; + background: + radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--quick-accent) 24%, transparent), transparent 42%), + linear-gradient(135deg, #ffffff, color-mix(in srgb, var(--quick-bg) 88%, #ffffff)) !important; + color: var(--quick-icon) !important; + box-shadow: + inset 0 1px 0 rgba(255, 255, 255, 0.9), + 0 14px 28px var(--quick-shadow) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span { + background: + linear-gradient(180deg, color-mix(in srgb, var(--quick-accent) 18%, #ffffff), color-mix(in srgb, var(--quick-bg) 82%, #ffffff)) !important; + color: var(--quick-icon) !important; +} + +/* #/imageWorkbench quick actions: remove visible borders while keeping the category color system. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-quick-board button > span { + border: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible { + border: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span { + border-width: 0 !important; + border-style: none !important; + border-color: transparent !important; +} + +/* #/imageWorkbench quick actions: soften each action so the tones blend into the page. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board { + background: rgba(255, 255, 255, 0.3) !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button { + background: + radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--quick-accent) 10%, transparent), transparent 44%), + linear-gradient(135deg, color-mix(in srgb, var(--quick-bg) 86%, #ffffff), color-mix(in srgb, var(--quick-bg) 96%, #ffffff)) !important; + box-shadow: none !important; + color: var(--quick-text) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span { + background: transparent !important; + color: var(--quick-text) !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span .anticon, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button > span svg { + color: inherit !important; + fill: currentColor !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible { + background: + radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--quick-accent) 14%, transparent), transparent 44%), + linear-gradient(135deg, color-mix(in srgb, var(--quick-bg) 92%, #ffffff), color-mix(in srgb, var(--quick-bg) 98%, #ffffff)) !important; + box-shadow: none !important; + color: var(--quick-text) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span { + background: transparent !important; + color: var(--quick-text) !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span .anticon, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:hover > span svg, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span .anticon, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.ecom-command-composer-wrap:has(.ecom-inspiration-lab) .ecom-command-quick-board button:focus-visible > span svg { + color: inherit !important; + fill: currentColor !important; +} + +/* #/imageWorkbench generated results: remove all visual labels and their reserved space. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-node-label, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-main-result > span, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node .clone-ai-result-grid button > span { + display: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) { + padding-top: 20px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-canvas-node:not(.is-generating) .clone-ai-node-drag-handle { + height: 100% !important; + background: transparent !important; +} + +/* #/imageWorkbench history records: keep hover delete icon centered in the row. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item { + position: relative !important; + display: block !important; + isolation: isolate !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-main { + width: 100% !important; + padding-right: 46px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item:hover .ecom-command-history__item-delete, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item.is-active .ecom-command-history__item-delete { + grid-column: auto !important; + grid-row: auto !important; + align-self: auto !important; + position: absolute !important; + top: 50% !important; + right: 10px !important; + z-index: 4 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + width: 28px !important; + height: 28px !important; + min-width: 28px !important; + min-height: 28px !important; + margin: 0 !important; + padding: 0 !important; + line-height: 1 !important; + transform: translateY(-50%) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete .anticon, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-history__item .ecom-command-history__item-delete svg { + display: block !important; + line-height: 1 !important; +} + +/* #/imageWorkbench composer redesign: mode tabs outside, settings and assets inside. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs { + display: grid !important; + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + gap: 8px !important; + width: min(100%, 760px) !important; + margin: 0 auto 12px !important; + padding: 4px !important; + border: 1px solid rgba(30, 189, 219, 0.11) !important; + border-radius: 18px !important; + background: rgba(255, 255, 255, 0.64) !important; + box-shadow: + 0 14px 34px rgba(16, 115, 204, 0.055), + inset 0 1px 0 rgba(255, 255, 255, 0.78) !important; + backdrop-filter: blur(14px) saturate(1.08) !important; + -webkit-backdrop-filter: blur(14px) saturate(1.08) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button { + --mode-accent: #1073cc; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 7px !important; + min-width: 0 !important; + min-height: 42px !important; + padding: 0 11px !important; + border: 0 !important; + border-radius: 14px !important; + background: transparent !important; + color: rgba(16, 32, 44, 0.66) !important; + box-shadow: none !important; + cursor: pointer !important; + transition: + background 180ms ease, + color 180ms ease, + box-shadow 180ms ease, + transform 180ms ease !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--set) { + --mode-accent: #0f8f72; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--detail) { + --mode-accent: #7a5af8; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--model) { + --mode-accent: #1073cc; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--video) { + --mode-accent: #cc6b14; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:has(.ecom-command-mode-icon--hot) { + --mode-accent: #c04468; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button.is-active { + background: + radial-gradient(circle at 20% 18%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 58%), + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 252, 254, 0.9)) !important; + color: rgba(16, 32, 44, 0.9) !important; + box-shadow: + inset 0 0 0 1px color-mix(in srgb, var(--mode-accent) 18%, transparent), + 0 10px 22px color-mix(in srgb, var(--mode-accent) 10%, transparent) !important; + transform: translateY(-1px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon { + display: inline-grid !important; + width: 24px !important; + height: 24px !important; + min-width: 24px !important; + place-items: center !important; + border: 0 !important; + border-radius: 9px !important; + background: color-mix(in srgb, var(--mode-accent) 11%, #ffffff) !important; + color: var(--mode-accent) !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important; + font-size: 13px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs strong { + min-width: 0 !important; + overflow: hidden !important; + font-size: 13px !important; + font-weight: 760 !important; + letter-spacing: 0 !important; + line-height: 1 !important; + text-overflow: ellipsis !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + display: grid !important; + grid-template-columns: minmax(0, 1fr) !important; + grid-auto-rows: auto !important; + grid-template-rows: none !important; + align-content: start !important; + row-gap: 12px !important; + min-height: clamp(214px, 17vh, 236px) !important; + padding: 18px 22px 16px !important; + overflow: visible !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: clamp(256px, 22vh, 286px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings { + grid-column: 1 !important; + grid-row: auto !important; + display: flex !important; + flex-wrap: wrap !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 8px !important; + width: 100% !important; + padding: 0 0 2px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { + min-width: 0 !important; + min-height: 36px !important; + padding: 0 11px !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 13px !important; + background: rgba(248, 253, 255, 0.72) !important; + color: rgba(16, 32, 44, 0.72) !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button.is-active { + border-color: rgba(30, 189, 219, 0.28) !important; + background: rgba(241, 251, 254, 0.92) !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.055) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon { + width: 20px !important; + height: 20px !important; + border: 0 !important; + background: rgba(232, 249, 253, 0.78) !important; + color: #0f829b !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover { + position: static !important; + grid-column: 1 !important; + grid-row: auto !important; + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + gap: 8px !important; + width: 100% !important; + max-width: 100% !important; + min-height: 62px !important; + max-height: 72px !important; + padding: 8px 2px 10px !important; + overflow-x: auto !important; + overflow-y: visible !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + transform: none !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.18) transparent !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb { + flex: 0 0 58px !important; + width: 58px !important; + height: 58px !important; + border: 1px solid rgba(30, 189, 219, 0.12) !important; + border-radius: 14px !important; + background: rgba(246, 251, 253, 0.9) !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.06) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb img, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb video { + border-radius: 13px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add { + flex: 0 0 38px !important; + width: 38px !important; + height: 38px !important; + min-height: 38px !important; + margin: 0 !important; + border: 0 !important; + border-radius: 12px !important; + background: rgba(232, 249, 253, 0.72) !important; + color: #0f829b !important; + font-size: 24px !important; + box-shadow: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer textarea { + grid-column: 1 !important; + grid-row: auto !important; + min-height: clamp(82px, 9vh, 106px) !important; + padding: 2px 0 4px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) > textarea { + min-height: clamp(68px, 7vh, 92px) !important; + max-height: 112px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + grid-column: 1 !important; + grid-row: auto !important; + display: flex !important; + align-items: center !important; + justify-content: space-between !important; + gap: 12px !important; + width: 100% !important; + padding: 10px 0 0 !important; + border-top: 1px solid rgba(30, 189, 219, 0.085) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions { + display: flex !important; + align-items: center !important; + justify-content: flex-start !important; + min-width: 0 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom { + position: static !important; + display: inline-flex !important; + align-items: center !important; + justify-content: center !important; + gap: 7px !important; + width: auto !important; + min-width: 0 !important; + height: 38px !important; + min-height: 38px !important; + margin: 0 !important; + padding: 0 12px !important; + border: 0 !important; + border-radius: 13px !important; + background: rgba(248, 253, 255, 0.78) !important; + color: rgba(16, 32, 44, 0.68) !important; + box-shadow: none !important; + transform: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom:hover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom.is-dragging { + background: rgba(232, 249, 253, 0.9) !important; + color: #0f829b !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom > span { + display: inline-flex !important; + width: 20px !important; + min-width: 20px !important; + height: 20px !important; + place-items: center !important; + margin: 0 !important; + font-size: 17px !important; + line-height: 1 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong { + display: inline !important; + font-size: 13px !important; + font-weight: 720 !important; + line-height: 1 !important; + white-space: nowrap !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row { + display: flex !important; + align-items: center !important; + justify-content: flex-end !important; + min-width: 0 !important; +} + +@media (max-width: 900px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs { + grid-template-columns: repeat(5, minmax(94px, 1fr)) !important; + width: 100% !important; + overflow-x: auto !important; + overscroll-behavior-x: contain !important; + scrollbar-width: none !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs::-webkit-scrollbar { + display: none !important; + } +} + +@media (max-width: 640px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs { + grid-template-columns: repeat(5, minmax(88px, 1fr)) !important; + margin-bottom: 10px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs button { + min-height: 38px !important; + padding-inline: 8px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-mode-tabs .ecom-command-mode-icon { + width: 22px !important; + height: 22px !important; + min-width: 22px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer { + min-height: 230px !important; + padding: 15px !important; + row-gap: 10px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { + flex: 1 1 calc(50% - 5px) !important; + justify-content: flex-start !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + align-items: center !important; + } +} + +@media (max-width: 420px) { + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings { + display: grid !important; + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + gap: 7px !important; + justify-content: stretch !important; + overflow: visible !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button { + display: inline-flex !important; + width: auto !important; + min-width: 0 !important; + max-width: none !important; + height: 42px !important; + min-height: 42px !important; + padding: 0 !important; + justify-content: center !important; + font-size: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings button > span:not(.ecom-command-option-icon) { + display: none !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-option-row.ecom-command-option-row--settings .ecom-command-option-icon { + display: inline-grid !important; + width: 22px !important; + height: 22px !important; + min-width: 22px !important; + margin: 0 !important; + font-size: 14px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-toolbar { + flex-direction: row !important; + align-items: center !important; + justify-content: space-between !important; + min-height: 58px !important; + height: auto !important; + padding-top: 10px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-actions, + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-submit-row { + width: auto !important; + min-width: 0 !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom { + width: auto !important; + min-width: 0 !important; + max-width: none !important; + height: 38px !important; + min-height: 38px !important; + padding: 0 12px !important; + font-size: 13px !important; + } + + html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-reference.ecom-command-reference--bottom strong { + display: inline !important; + } +} + +/* Compact composer override: keep the generated-state composer from growing into the canvas. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact:not(.is-history-detail *) .clone-ai-input-wrapper.ecom-command-composer, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact:not(.is-history-detail *) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: 156px !important; + max-height: 186px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap.has-generated.is-compact:not(.is-history-detail *) .ecom-command-composer textarea { + min-height: 36px !important; + max-height: 36px !important; +} + +/* Composer menu anchors: place option popovers under the clicked control, not under the whole composer. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover { + position: absolute !important; + inset: var(--composer-popover-top, 48px) auto auto var(--composer-popover-left, 0px) !important; + right: auto !important; + bottom: auto !important; + margin: 0 !important; + transform: none !important; + translate: none !important; + z-index: 160 !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--platform { + width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !important; + max-width: min(360px, calc(100% - var(--composer-popover-left, 0px))) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--languages, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--ratio-picker { + width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important; + max-width: min(420px, calc(100% - var(--composer-popover-left, 0px))) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer > .ecom-command-popover.ecom-command-popover--settings { + width: min(520px, calc(100% - var(--composer-popover-left, 0px))) !important; + max-width: min(520px, calc(100% - var(--composer-popover-left, 0px))) !important; +} + +/* Uploaded assets stay as compact attachments inside the composer hierarchy. */ +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) { + min-height: clamp(224px, 18vh, 250px) !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-popover, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-popover { + position: static !important; + grid-column: 1 !important; + display: inline-flex !important; + align-items: center !important; + justify-content: flex-start !important; + justify-self: start !important; + gap: 8px !important; + width: auto !important; + max-width: min(100%, 420px) !important; + min-height: 48px !important; + max-height: 52px !important; + padding: 0 !important; + overflow-x: auto !important; + overflow-y: visible !important; + border: 0 !important; + border-radius: 0 !important; + background: transparent !important; + box-shadow: none !important; + transform: none !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-thumb, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-thumb { + flex: 0 0 48px !important; + width: 48px !important; + height: 48px !important; + border-radius: 12px !important; +} + +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-asset-add, +html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"] .ecom-command-composer-wrap:not(.has-generated.is-compact) .clone-ai-input-wrapper.ecom-command-composer:has(.ecom-command-asset-popover) .ecom-command-asset-add { + flex: 0 0 34px !important; + width: 34px !important; + height: 34px !important; + min-height: 34px !important; + margin: 0 !important; + font-size: 22px !important; +}