/* ===== 3D 定制专用详情页 ===== */
.slayhot-3d-single {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0;
    min-height: calc(100vh - 80px);
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", sans-serif;
}

/* ===== 左侧 3D 视图区（强制高度，防塌陷） ===== */
.slayhot-3d-viewport,
.slayhot-3d-canvas,
#slayhot-3d-canvas {
    width: 100% !important;
    min-height: 550px !important;
    height: 550px !important;
    position: relative !important;
    display: block !important;
    background-color: #e8e8e8 !important; /* 灰色底，确保容器可见 */
    overflow: hidden !important;
}
.slayhot-3d-viewport { border-right: 1px solid #e5e7eb; }
.slayhot-3d-canvas { cursor: grab; }
.slayhot-3d-canvas:active { cursor: grabbing; }
.slayhot-3d-canvas canvas,
#slayhot-3d-canvas canvas {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.slayhot-3d-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #9ca3af;
    background: rgba(255,255,255,.85);
    padding: 4px 12px;
    border-radius: 20px;
    pointer-events: none;
}

/* 悬浮工具按钮 */
.slayhot-3d-tools {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slayhot-tool {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    transition: all .15s;
}
.slayhot-tool:hover { background: #f3f4f6; transform: scale(1.05); }

/* ===== 右侧控制面板 ===== */
.slayhot-3d-panel {
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    background: #fff;
    overflow-y: auto;
}
.slayhot-3d-title { font-size: 22px; font-weight: 700; margin: 0; }
.slayhot-3d-price { font-size: 20px; font-weight: 700; color: #4f46e5; }

/* 步骤 Accordion */
.slayhot-3d-steps { display: flex; flex-direction: column; gap: 10px; }
.slayhot-step {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
}
.slayhot-step summary {
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background: #f9fafb;
    list-style: none;
}
.slayhot-step summary::-webkit-details-marker { display: none; }
.slayhot-step[open] summary { border-bottom: 1px solid #e5e7eb; background: #f3f4f6; }
.slayhot-step-body { padding: 16px; }
.slayhot-step-body label { display: block; font-size: 12px; color: #6b7280; margin-bottom: 8px; }

/* 颜色色块 */
.slayhot-color-row { display: flex; gap: 10px; }
.slayhot-swatch {
    width: 36px; height: 36px; border-radius: 50%;
    cursor: pointer; border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d1d5db;
    transition: transform .15s;
}
.slayhot-swatch:hover { transform: scale(1.1); }
.slayhot-swatch.active { box-shadow: 0 0 0 2px #4f46e5; }

/* 图案 */
.slayhot-pattern-row { display: flex; gap: 10px; flex-wrap: wrap; }
.slayhot-pattern {
    padding: 8px 14px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 12px; cursor: pointer; transition: all .15s;
}
.slayhot-pattern:hover { border-color: #4f46e5; }
.slayhot-pattern.active { border-color: #4f46e5; background: #ede9fe; }

/* 文字输入 */
.slayhot-text-input {
    width: 100%; padding: 10px 14px; border: 1px solid #d1d5db;
    border-radius: 8px; font-size: 14px; outline: none;
}
.slayhot-text-input:focus { border-color: #4f46e5; }

/* Sticky CTA */
.slayhot-3d-cta {
    position: sticky;
    bottom: 0;
    padding-top: 16px;
    margin-top: auto;
}
.slayhot-3d-addtocart {
    width: 100%;
    padding: 16px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s;
}
.slayhot-3d-addtocart:hover { background: #4338ca; }
.slayhot-3d-addtocart:disabled { opacity: .6; cursor: not-allowed; }

/* ===== 响应式 ===== */
@media (max-width: 900px) {
    .slayhot-3d-single { grid-template-columns: 1fr; }
    .slayhot-3d-viewport { min-height: 400px; border-right: none; border-bottom: 1px solid #e5e7eb; }
    .slayhot-3d-canvas { min-height: 400px; }
}