- {commerceScenarioOptions.map((option) => (
+
+
+ {visibleCommerceScenarioOptions.map((option) => (
+
+ ))}
- ))}
+
-
左右滑动查看更多
+
+ {isCommerceScenarioMoreOpen ? "左右滑动查看全部场景" : "点击更多查看全部场景"}
+
{productImages.length ? (
@@ -6309,31 +6528,53 @@ function ProductClonePage(_props: ProductClonePageProps = {}) {
{renderComposerMenu()}
- {(status === "idle" || status === "ready") && !showMainVideoWorkspace && isCloneTemplateStripVisible ? (
-
- {activeCommerceScenarioTemplates.map((card) => (
-
- ))}
-
+ {(status === "idle" || status === "ready") && !showMainVideoWorkspace && activeCommerceScenario !== null && isCloneTemplateStripVisible ? (
+
+
+
+ {activeCommerceScenarioTemplates.map((card) => (
+
+ ))}
+
+
+
) : null}
{(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css
index bbdf2cc..a38e487 100644
--- a/src/styles/ecommerce-standalone.css
+++ b/src/styles/ecommerce-standalone.css
@@ -17437,27 +17437,19 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
/* Ecommerce home scenario templates */
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs {
display: flex !important;
- align-items: center !important;
- justify-content: flex-start !important;
- gap: 8px !important;
- width: fit-content !important;
- max-width: min(100%, 1120px) !important;
- margin: 0 auto 12px !important;
- padding: 6px !important;
- box-sizing: border-box !important;
+ align-items: stretch !important;
+ justify-content: center !important;
+ gap: 9px !important;
+ width: min(100%, 1180px) !important;
+ margin: 0 auto 10px !important;
+ padding: 5px 0 !important;
overflow-x: auto !important;
- overflow-y: hidden !important;
- overscroll-behavior-x: contain !important;
scrollbar-width: none !important;
scroll-snap-type: x proximity !important;
- border: 1px solid rgba(30, 189, 219, 0.12) !important;
- border-radius: 24px !important;
- background: rgba(255, 255, 255, 0.42) !important;
- box-shadow:
- inset 0 1px 0 rgba(255, 255, 255, 0.68),
- 0 10px 28px rgba(16, 115, 204, 0.05) !important;
- backdrop-filter: blur(16px) saturate(1.05) !important;
- -webkit-backdrop-filter: blur(16px) saturate(1.05) !important;
+ border: 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"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs::-webkit-scrollbar {
@@ -17479,9 +17471,9 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
min-height: 40px !important;
padding: 7px 14px 7px 10px !important;
scroll-snap-align: start !important;
- border: 1px solid rgba(16, 32, 44, 0.07) !important;
+ border: 1px solid color-mix(in srgb, var(--mode-accent) 16%, transparent) !important;
border-radius: 18px !important;
- background: rgba(255, 255, 255, 0.68) !important;
+ background: color-mix(in srgb, var(--mode-accent) 7%, rgba(255, 255, 255, 0.68)) !important;
color: rgba(16, 32, 44, 0.68) !important;
box-shadow:
0 2px 6px rgba(16, 32, 44, 0.03),
@@ -17501,15 +17493,19 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
- background: rgba(255, 255, 255, 0.86) !important;
- border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important;
- color: rgba(16, 32, 44, 0.86) !important;
+ background: color-mix(in srgb, var(--mode-accent) 18%, rgba(255, 255, 255, 0.88)) !important;
+ border-color: color-mix(in srgb, var(--mode-accent) 48%, transparent) !important;
+ color: rgba(16, 32, 44, 0.88) !important;
box-shadow:
- 0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent),
+ 0 8px 20px color-mix(in srgb, var(--mode-accent) 16%, transparent),
inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
transform: translateY(-1px) !important;
}
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover .ecom-command-mode-icon {
+ background: color-mix(in srgb, var(--mode-accent) 20%, rgba(255, 255, 255, 0.85)) !important;
+}
+
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active {
background:
radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 14%, transparent), transparent 54%),
@@ -17540,24 +17536,22 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs .ecom-command-mode-icon {
grid-row: auto !important;
display: inline-grid !important;
- width: 22px !important;
- min-width: 22px !important;
- height: 22px !important;
+ width: 26px !important;
+ min-width: 26px !important;
+ height: 26px !important;
place-items: center !important;
border: 0 !important;
- border-radius: 7px !important;
- background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important;
- color: var(--mode-accent) !important;
- box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
- font-size: 13px !important;
+ border-radius: 8px !important;
+ background: transparent !important;
+ box-shadow: none !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"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
- background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important;
- box-shadow:
- inset 0 1px 0 rgba(255, 255, 255, 0.9),
- 0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important;
+ background: transparent !important;
+ box-shadow: none !important;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs strong {
@@ -17616,24 +17610,39 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) {
- --mode-accent: #c04468;
+ --mode-accent: #D45C5C;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster) {
+ --mode-accent: #7A6BD1;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage) {
+ --mode-accent: #2E9E9E;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model) {
+ --mode-accent: #B56B7A;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene) {
+ --mode-accent: #4A9B7F;
}
-html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) {
- --mode-accent: #cc6b14;
+ --mode-accent: #C78A3E;
}
-html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage),
-html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) {
- --mode-accent: #0f8f72;
+ --mode-accent: #5A8BAE;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch) {
+ --mode-accent: #9A8BB8;
}
-html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model),
-html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch),
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo) {
- --mode-accent: #1073cc;
+ --mode-accent: #3A7CA5;
}
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-strip {
@@ -17742,13 +17751,42 @@ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[d
html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
display: block !important;
width: min(100%, 1180px) !important;
- margin: -4px auto 6px !important;
+ margin: -6px auto 4px !important;
text-align: center !important;
font-size: 11px !important;
font-weight: 480 !important;
line-height: 1 !important;
- color: rgba(16, 32, 44, 0.36) !important;
+ color: rgba(16, 32, 44, 0.26) !important;
}
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before,
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
+ display: inline-block !important;
+ font-size: 10px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before {
+ content: "←" !important;
+ margin-right: 5px !important;
+ animation: ecom-scroll-hint-left 1.6s ease-in-out infinite !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
+ content: "→" !important;
+ margin-left: 5px !important;
+ animation: ecom-scroll-hint-right 1.6s ease-in-out infinite !important;
+ animation-delay: 0.8s !important;
+ }
+}
+
+@keyframes ecom-scroll-hint-left {
+ 0%, 100% { opacity: 0.25; transform: translateX(0); }
+ 50% { opacity: 0.6; transform: translateX(-2px); }
+}
+
+@keyframes ecom-scroll-hint-right {
+ 0%, 100% { opacity: 0.25; transform: translateX(0); }
+ 50% { opacity: 0.6; transform: translateX(2px); }
}
@media (max-width: 640px) {
@@ -18321,6 +18359,433 @@ html body #root div.ecommerce-standalone.web-shell[data-view="ecommerce"][data-w
transform: translateY(-1px) !important;
}
+/* Ecommerce home scenario navigation and template carousel refinement */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
+ display: flex !important;
+ justify-content: center !important;
+ width: 100% !important;
+ margin: 0 auto 10px !important;
+ padding: 0 16px !important;
+ box-sizing: border-box !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
+ display: flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ gap: 10px !important;
+ width: auto !important;
+ max-width: 100% !important;
+ margin: 0 auto !important;
+ padding: 4px !important;
+ overflow-x: auto !important;
+ overflow-y: hidden !important;
+ overscroll-behavior-x: contain !important;
+ scrollbar-width: none !important;
+ scroll-snap-type: x proximity !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"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
+ min-height: 42px !important;
+ padding: 8px 15px 8px 11px !important;
+ border-radius: 999px !important;
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(249, 253, 255, 0.78)) !important;
+ box-shadow:
+ 0 8px 22px rgba(16, 115, 204, 0.06),
+ inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
+ padding-right: 31px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more {
+ --mode-accent: #1073cc;
+ border-style: dashed !important;
+ color: rgba(16, 32, 44, 0.64) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more.is-open {
+ border-style: solid !important;
+ color: rgba(16, 32, 44, 0.92) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-mode-icon--more {
+ background: rgba(232, 249, 253, 0.82) !important;
+ color: #1073cc !important;
+ font-size: 14px !important;
+ font-weight: 900 !important;
+ letter-spacing: 0 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
+ display: block !important;
+ width: min(100%, 1180px) !important;
+ margin: -6px auto 8px !important;
+ text-align: center !important;
+ color: rgba(16, 32, 44, 0.28) !important;
+ font-size: 11px !important;
+ font-weight: 620 !important;
+ line-height: 1.1 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
+ position: relative !important;
+ justify-self: center !important;
+ width: 100% !important;
+ max-width: 1180px !important;
+ min-width: 0 !important;
+ margin: 16px auto 12px !important;
+ box-sizing: border-box !important;
+ isolation: isolate !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after {
+ content: "" !important;
+ position: absolute !important;
+ top: 0 !important;
+ bottom: 0 !important;
+ z-index: 2 !important;
+ width: 54px !important;
+ pointer-events: none !important;
+ opacity: 0.9 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::before {
+ left: 0 !important;
+ background: linear-gradient(90deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel::after {
+ right: 0 !important;
+ background: linear-gradient(270deg, rgba(245, 252, 255, 0.96), rgba(245, 252, 255, 0)) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip {
+ display: flex !important;
+ grid-template-columns: none !important;
+ gap: 14px !important;
+ width: 100% !important;
+ max-width: 100% !important;
+ min-width: 0 !important;
+ margin: 0 !important;
+ padding: 2px 2px 6px !important;
+ box-sizing: border-box !important;
+ overflow-x: auto !important;
+ overflow-y: hidden !important;
+ scroll-behavior: smooth !important;
+ scroll-padding: 4px !important;
+ scroll-snap-type: x mandatory !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"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-strip::-webkit-scrollbar {
+ display: none !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
+ flex: 0 0 clamp(260px, 24vw, 312px) !important;
+ display: grid !important;
+ grid-template-columns: 96px minmax(0, 1fr) !important;
+ min-height: 126px !important;
+ scroll-snap-align: start !important;
+ border-color: rgba(30, 189, 219, 0.13) !important;
+ border-radius: 18px !important;
+ background:
+ linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(241, 250, 253, 0.9)) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
+ position: absolute !important;
+ top: 50% !important;
+ z-index: 4 !important;
+ display: inline-flex !important;
+ align-items: center !important;
+ justify-content: center !important;
+ width: 38px !important;
+ height: 38px !important;
+ padding: 0 !important;
+ border: 1px solid rgba(30, 189, 219, 0.2) !important;
+ border-radius: 50% !important;
+ background: rgba(255, 255, 255, 0.92) !important;
+ color: #1073cc !important;
+ box-shadow: 0 12px 28px rgba(16, 115, 204, 0.14) !important;
+ font-size: 24px !important;
+ font-weight: 760 !important;
+ line-height: 1 !important;
+ cursor: pointer !important;
+ opacity: 0 !important;
+ transform: translateY(-50%) scale(0.94) !important;
+ transition:
+ opacity 180ms ease,
+ transform 180ms ease,
+ border-color 180ms ease,
+ background 180ms ease !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--prev {
+ left: 8px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav--next {
+ right: 8px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel:hover .ecom-command-template-nav,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:focus-visible {
+ opacity: 1 !important;
+ transform: translateY(-50%) scale(1) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav:hover {
+ border-color: rgba(30, 189, 219, 0.42) !important;
+ background: rgba(232, 249, 253, 0.98) !important;
+ transform: translateY(-50%) scale(1.04) !important;
+}
+
+@media (max-width: 900px) {
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
+ justify-content: flex-start !important;
+ padding-right: 12px !important;
+ padding-left: 12px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
+ justify-content: flex-start !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
+ width: 100% !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
+ opacity: 0.86 !important;
+ transform: translateY(-50%) scale(0.96) !important;
+ }
+}
+
+@media (max-width: 640px) {
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
+ padding-right: 8px !important;
+ padding-left: 8px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
+ gap: 8px !important;
+ padding-bottom: 6px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
+ min-height: 40px !important;
+ padding: 7px 12px 7px 9px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
+ flex-basis: min(82vw, 340px) !important;
+ grid-template-columns: 86px minmax(0, 1fr) !important;
+ min-height: 116px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card__media {
+ width: 86px !important;
+ min-width: 86px !important;
+ height: 96px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-nav {
+ width: 34px !important;
+ height: 34px !important;
+ font-size: 21px !important;
+ }
+}
+
+/* Keep scenario tabs on the original ecommerce theme instead of category-specific colors. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
+ margin-bottom: 2px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
+ padding-top: 2px !important;
+ padding-bottom: 2px !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
+ --mode-accent: #0f8fa8 !important;
+ border-color: rgba(30, 189, 219, 0.15) !important;
+ background: rgba(255, 255, 255, 0.72) !important;
+ color: rgba(16, 32, 44, 0.74) !important;
+ box-shadow:
+ 0 6px 18px rgba(16, 115, 204, 0.045),
+ inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
+ border-color: rgba(30, 189, 219, 0.24) !important;
+ background: rgba(255, 255, 255, 0.84) !important;
+ color: rgba(16, 32, 44, 0.88) !important;
+ box-shadow:
+ 0 8px 20px rgba(16, 115, 204, 0.06),
+ inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
+ border-color: rgba(30, 189, 219, 0.34) !important;
+ background:
+ linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(247, 253, 255, 0.86)) !important;
+ color: rgba(16, 32, 44, 0.94) !important;
+ box-shadow:
+ 0 10px 24px rgba(16, 115, 204, 0.075),
+ inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon {
+ background: rgba(232, 249, 253, 0.86) !important;
+ color: #0f829b !important;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
+ background: rgba(220, 247, 252, 0.95) !important;
+ color: #0b8ea6 !important;
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.92),
+ 0 3px 8px rgba(30, 189, 219, 0.1) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.ecom-command-scenario-more {
+ border-style: solid !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
+ max-height: 10px !important;
+ margin: -6px auto 2px !important;
+ opacity: 0.36 !important;
+ color: rgba(16, 32, 44, 0.22) !important;
+ font-size: 10px !important;
+ font-weight: 560 !important;
+ line-height: 10px !important;
+ transform: scale(0.92) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::before,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint::after {
+ content: none !important;
+ display: none !important;
+ animation: none !important;
+}
+
+@media (max-width: 640px) {
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell {
+ width: 100% !important;
+ max-width: calc(100vw - 16px) !important;
+ padding-right: 0 !important;
+ padding-left: 0 !important;
+ overflow: hidden !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs {
+ width: 100% !important;
+ max-width: 100% !important;
+ justify-content: flex-start !important;
+ padding-right: 2px !important;
+ padding-left: 2px !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-scroll-hint {
+ width: calc(100vw - 24px) !important;
+ max-width: calc(100vw - 24px) !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel {
+ width: calc(100vw - 24px) !important;
+ max-width: calc(100vw - 24px) !important;
+ overflow: hidden !important;
+ }
+
+ html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-template-carousel .ecom-command-template-card {
+ flex-basis: min(78vw, 320px) !important;
+ }
+}
+
+/* Restore the colorful scenario feedback while keeping the compact responsive layout. */
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--popular) {
+ --mode-accent: #c04468 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--poster),
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--festival) {
+ --mode-accent: #cc6b14 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--mainImage),
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--scene),
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--background) {
+ --mode-accent: #0f8f72 !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--model),
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--retouch),
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button:has(.ecom-command-mode-icon--salesVideo),
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.ecom-command-scenario-more {
+ --mode-accent: #1073cc !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button {
+ border-color: rgba(16, 32, 44, 0.07) !important;
+ background: rgba(255, 255, 255, 0.68) !important;
+ color: rgba(16, 32, 44, 0.68) !important;
+ box-shadow:
+ 0 2px 6px rgba(16, 32, 44, 0.03),
+ inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs .ecom-command-mode-icon {
+ background: color-mix(in srgb, var(--mode-accent) 10%, rgba(255, 255, 255, 0.9)) !important;
+ color: var(--mode-accent) !important;
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button:hover {
+ border-color: color-mix(in srgb, var(--mode-accent) 22%, transparent) !important;
+ background: rgba(255, 255, 255, 0.86) !important;
+ color: rgba(16, 32, 44, 0.86) !important;
+ box-shadow:
+ 0 8px 18px color-mix(in srgb, var(--mode-accent) 10%, transparent),
+ inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-active,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs.ecom-command-mode-tabs button.is-open {
+ border-color: color-mix(in srgb, var(--mode-accent) 42%, transparent) !important;
+ background:
+ radial-gradient(circle at 24% 16%, color-mix(in srgb, var(--mode-accent) 17%, transparent), transparent 52%),
+ rgba(255, 255, 255, 0.98) !important;
+ color: rgba(16, 32, 44, 0.96) !important;
+ box-shadow:
+ 0 12px 28px color-mix(in srgb, var(--mode-accent) 15%, transparent),
+ inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
+}
+
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-active .ecom-command-mode-icon,
+html body #root .ecommerce-standalone.ecommerce-standalone .product-clone-page[data-tool="clone"][data-tool="clone"]:not(.is-history-detail) .ecom-command-scenario-shell .ecom-command-scenario-tabs button.is-open .ecom-command-mode-icon {
+ background: color-mix(in srgb, var(--mode-accent) 16%, rgba(255, 255, 255, 0.95)) !important;
+ color: var(--mode-accent) !important;
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.9),
+ 0 2px 6px color-mix(in srgb, var(--mode-accent) 12%, transparent) !important;
+}
+
/* ── One-click copywriting page ── */
.ecommerce-standalone .ecom-copywriting-page {
position: relative !important;