/* 商品详情页 · 骨架编辑器样式(固化骨架 + 开放插槽)
 * 复用 admin.css 的 .decor-topbar / .decor-layout / .decor-phone / .decor-canvas 等布局类,
 * 此处仅补充骨架编辑器专属: 锁定块灰罩、插槽蓝虚线、属性面板组件。 */

/* ===== 左侧插槽组件白名单 ===== */
.pd-palette-tip {
    font-size: 12px; color: #8a8f99; padding: 8px 12px; line-height: 1.5;
    background: #f6f8fa; border-bottom: 1px solid #eceef1;
}
.pd-palette-slot {
    padding: 10px 12px; border-bottom: 1px solid #f0f1f3;
}
.pd-pslot-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; font-weight: 600; color: #2b2f36; margin-bottom: 8px;
}
.pd-pslot-key {
    font-size: 11px; font-weight: 400; color: #b0b4bb;
    background: #f0f1f3; border-radius: 4px; padding: 1px 6px;
}
.pd-pslot-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.pd-add-btn { cursor: pointer; }

/* ===== 中间画布: 锁定块 ===== */
.pd-lock-block {
    position: relative; margin: 8px 10px; border: 1px solid #e3e6ea; border-radius: 10px;
    background: #fff; overflow: hidden; cursor: pointer; transition: box-shadow .15s;
}
.pd-lock-block.pd-selected { box-shadow: 0 0 0 2px #1aad19; }
.pd-lock-badge {
    position: absolute; top: 0; right: 0; z-index: 2;
    font-size: 11px; color: #6b7280; background: #eef0f2; padding: 2px 8px;
    border-bottom-left-radius: 8px;
}
.pd-lock-name {
    font-size: 12px; color: #9097a1; text-align: center; padding: 5px 0;
    border-top: 1px dashed #e7e9ec;
}
.pd-lock-block::after {
    /* 灰罩: 提示不可删除(轻微) */
    content: ''; position: absolute; inset: 0; background: rgba(120,130,140,.04); pointer-events: none;
}

/* 锁定块内部 mock 预览 */
.pd-banner-mock {
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg,#ffd9c2,#ffe9dc); color: #a86a4a; font-size: 13px;
}
.pd-info-mock { padding: 10px 12px; background: #fff; }
/* 商品信息mock - 电商风格价格头 */
.pdi-price-row { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.pdi-price-main { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pdi-cur { font-size: 13px; color: #ff502C; font-weight: 700; }
.pdi-amt { font-size: 22px; color: #ff502C; font-weight: 700; line-height: 1.1; }
.pdi-op { font-size: 11px; color: #bbb; text-decoration: line-through; margin-left: 2px; }
.pdi-vip { font-size: 10px; color: #fff; background: linear-gradient(135deg,#f5a623,#e08c18); padding: 1px 6px; border-radius: 6px; font-weight: 600; vertical-align: 2px; }
.pdi-actions { display: flex; gap: 10px; flex-shrink: 0; }
.pdi-action { display: flex; flex-direction: column; align-items: center; font-size: 9px; color: #999; line-height: 1.2; }
.pdi-action-ic { font-size: 15px; }
.pdi-svip { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg,#fff8e6,#ffefcc); border-radius: 6px; padding: 6px 10px; margin-bottom: 6px; font-size: 11px; color: #666; }
.pdi-svip strong { color: #f5a623; font-weight: 700; }
.pdi-svip-link { color: #f5a623; font-weight: 600; white-space: nowrap; margin-left: 6px; flex-shrink: 0; font-size: 10px; }
.pdi-tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.pdi-tag { font-size: 10px; }
.pdi-tag-points { color: #ff6a00; }
.pdi-tag-freeship { color: #ff6a00; border: 1px solid #ffd6b3; border-radius: 3px; padding: 0 4px; }
.pdi-title { font-size: 13px; font-weight: 700; color: #222; line-height: 1.4; margin-bottom: 8px; word-break: break-all; }
.pdi-bottom { display: flex; justify-content: space-between; padding-top: 8px; border-top: 1px solid #f0f0f0; font-size: 10px; color: #999; }
.pdi-b-price { color: #ff502C; font-weight: 700; font-size: 12px; }
.pd-buybar-mock { display: flex; gap: 8px; padding: 8px; background: #fff; }
.pd-bb-cart {
    border: 1px solid #ff502C; color: #ff502C; background: #fff; border-radius: 20px;
    padding: 8px 14px; font-size: 13px; font-weight: 600;
}
.pd-bb-buy, .pd-bb-add {
    flex: 1; border: none; color: #fff; border-radius: 20px; padding: 9px 0; font-size: 14px; font-weight: 700;
}

/* ===== 中间画布: 插槽(蓝虚线) ===== */
.pd-slot {
    margin: 8px 10px; border: 2px dashed #4a90e2; border-radius: 10px; background: rgba(74,144,226,.04); overflow: hidden;
}
.pd-slot-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; font-size: 13px; font-weight: 600; color: #2f6db0;
    background: rgba(74,144,226,.08); border-bottom: 1px dashed #bcd7f2;
}
.pd-slot-tag { font-size: 11px; font-weight: 400; color: #6f9fd0; }
.pd-slot-body { padding: 10px 12px; min-height: 40px; }
.pd-slot-empty { font-size: 12px; color: #9bb6d6; text-align: center; padding: 8px 0; }
.pd-slot-item {
    position: relative; display: flex; align-items: center; justify-content: space-between;
    background: #fff; border: 1px solid #cfe2f7; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; cursor: pointer;
}
.pd-slot-item.pd-selected { box-shadow: 0 0 0 2px #4a90e2; }
.pd-si-label { font-size: 13px; color: #2b2f36; }
.pd-si-del {
    border: none; background: #fdecea; color: #e0483b; border-radius: 50%; width: 22px; height: 22px;
    font-size: 12px; line-height: 1; cursor: pointer;
}

/* ===== 右侧属性面板补充 ===== */
.pd-rp-note {
    font-size: 12px; color: #6b7280; background: #f3f6f9; border: 1px solid #e6eaee;
    border-radius: 8px; padding: 8px 10px; margin-bottom: 12px;
}
.pd-rp-actions { margin-bottom: 12px; }
.pd-help { font-size: 13px; color: #4a5159; line-height: 1.7; padding: 6px 2px; }
.pd-help ul { padding-left: 18px; margin: 8px 0; }
.pd-field { margin-bottom: 12px; }
.pd-color { height: 38px; padding: 2px; }

/* 开关(switch) */
.pd-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.pd-switch input { opacity: 0; width: 0; height: 0; }
.pd-slider {
    position: absolute; cursor: pointer; inset: 0; background: #cfd4da; border-radius: 24px; transition: .2s;
}
.pd-slider::before {
    content: ''; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
    background: #fff; border-radius: 50%; transition: .2s;
}
.pd-switch input:checked + .pd-slider { background: #1aad19; }
.pd-switch input:checked + .pd-slider::before { transform: translateX(20px); }