:root {
  --detail-blue: #063fb4;
  --detail-blue-2: #0a63d8;
  --detail-blue-3: #168bff;
  --detail-cyan: #14bfea;
}

/* ============================================================
 * detail_brand.css · 商品详情页 / 商品主图「蓝色渐变」皮肤
 * ------------------------------------------------------------
 * detail 和 suite 页复用 suite_main_content.html + suite.css，
 * 本文件将原紫色系全部改为品牌蓝渐变。
 * 壳（顶栏/侧栏/页脚）不动，只改内容区。
 * ============================================================ */

/* ---- 顶部文案 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-eyebrow,
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-form-kicker {
  color: var(--detail-blue-3);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-hero-copy h1 span {
  background: linear-gradient(120deg, var(--detail-blue) 0%, var(--detail-blue-3) 60%, var(--detail-cyan) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- 步骤条 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-step strong {
  color: var(--detail-blue-3);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(22, 139, 255, 0.14);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-step.is-current {
  background: linear-gradient(135deg, rgba(22, 139, 255, 0.12), rgba(20, 191, 234, 0.1));
  box-shadow: 0 6px 18px rgba(22, 139, 255, 0.14);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-step.is-current strong {
  background: linear-gradient(135deg, var(--detail-blue) 0%, var(--detail-blue-3) 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(22, 139, 255, 0.35);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-step.is-current span {
  color: var(--detail-blue);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-step.is-complete {
  color: var(--detail-blue-2);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-steps > i {
  background: linear-gradient(90deg, var(--detail-blue-3), var(--detail-cyan));
}

/* ---- 左侧示例图卡 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-showcase {
  background: linear-gradient(145deg, var(--detail-blue) 0%, var(--detail-blue-3) 48%, var(--detail-cyan) 100%);
  border: 1px solid rgba(22, 139, 255, 0.35);
  box-shadow:
    0 28px 70px -22px rgba(6, 63, 180, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-showcase-glow {
  background:
    radial-gradient(circle at 70% 22%, rgba(255, 255, 255, 0.6), transparent 25%),
    linear-gradient(180deg, transparent 70%, rgba(255, 255, 255, 0.25));
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-showcase img {
  box-shadow: 0 14px 35px rgba(6, 63, 180, 0.25);
}

/* ---- 上传区 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-upload-card {
  border: 1px solid rgba(22, 139, 255, 0.16);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-upload-dropzone:hover,
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-upload-dropzone:focus-visible,
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-upload-dropzone.is-dragging {
  border-color: var(--detail-blue-3);
  background: #f5fbff;
}
/* 上传图标颜色已统一到 ecommerce_unified.css 的 .uni-upload-*（蓝渐变方块） */

/* 上传建议 */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-upload-guidance {
  background: linear-gradient(135deg, rgba(22, 139, 255, 0.1), rgba(20, 191, 234, 0.08));
  border: 1px solid rgba(22, 139, 255, 0.16);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-upload-guidance strong {
  color: var(--detail-blue);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-upload-guidance span {
  color: #4f6a99;
}

/* ---- 按钮 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-primary-btn {
  background: linear-gradient(135deg, var(--detail-blue) 0%, var(--detail-blue-3) 100%);
  box-shadow: 0 10px 20px rgba(22, 139, 255, 0.28);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-secondary-btn:hover {
  border-color: var(--detail-blue-3);
  color: var(--detail-blue);
  background: #f5fbff;
}

/* ---- 卖点步骤 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-field-label b {
  color: var(--detail-blue-3);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-ai-badge {
  color: var(--detail-blue-3);
  background: #f0f8ff;
  border-color: rgba(22, 139, 255, 0.2);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-form-field > input:focus,
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-form-field > select:focus,
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-form-field > textarea:focus {
  box-shadow: 0 0 0 3px rgba(22, 139, 255, 0.18);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-label-line button {
  color: var(--detail-blue-3);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-points-count {
  color: var(--detail-blue-3);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-point.is-selected {
  border-color: rgba(22, 139, 255, 0.35);
  color: var(--detail-blue);
  background: #f0f8ff;
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-point.is-selected i {
  color: var(--detail-blue-3);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-add-point-row input:focus {
  border-color: var(--detail-blue-3);
  box-shadow: 0 0 0 3px rgba(22, 139, 255, 0.12);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-add-point-row button {
  color: var(--detail-blue-3);
  background: #f0f8ff;
  border-color: rgba(22, 139, 255, 0.25);
}

/* ---- 生成按钮 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-generate-btn {
  background: linear-gradient(135deg, var(--detail-blue) 0%, var(--detail-blue-3) 100%);
  box-shadow: 0 12px 22px rgba(22, 139, 255, 0.28);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-status[data-tone="info"] {
  color: var(--detail-blue-3);
}

/* ---- 画布 / 素材 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-icon-btn {
  color: var(--detail-blue-3);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-material-card.is-active {
  border-color: var(--detail-blue-3);
  background: #f5fbff;
  box-shadow: 0 0 0 2px rgba(22, 139, 255, 0.1);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-material-card .text-thumb {
  color: var(--detail-blue-3);
  background: #e8f4ff;
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-ratio-group button.is-active {
  border-color: var(--detail-blue-3);
  color: var(--detail-blue-3);
  background: #f0f8ff;
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-artboard {
  border-color: var(--detail-blue-3);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-artboard-add {
  color: var(--detail-blue-3);
}

/* ---- 加载动画 ---- */
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-loading-orbit {
  border-color: #d6ecff;
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-loading-orbit::before,
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-loading-orbit::after {
  background: var(--detail-blue-3);
  box-shadow: 0 0 14px rgba(22, 139, 255, 0.5);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-loading-orbit span:nth-child(1) {
  background: var(--detail-cyan);
}
body:is([data-ecommerce-item="detail"], [data-ecommerce-item="suite"]) .ecommerce-suite-loading-orbit span:nth-child(2) {
  background: #ffd457;
}