/* ===== 商品管理 - 新增商品 ===== */
    #page-product-create.active { min-height: 100%; }
    .pc-page {
      min-width: 860px;
      min-height: calc(100vh - 48px);
      padding: 14px 14px 22px;
      background: #f3f5f8;
      color: #30363f;
    }
    .pc-section {
      margin-bottom: 12px;
      padding: 22px 78px 24px;
      border-radius: 6px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(30, 42, 62, .025);
    }
    .pc-section-title {
      margin: 0;
      color: #20252d;
      font-size: 16px;
      font-weight: 800;
      line-height: 24px;
    }
    .pc-field {
      width: 620px;
      margin-top: 16px;
      display: grid;
      grid-template-columns: 96px 352px minmax(0, 1fr);
      align-items: center;
      column-gap: 10px;
    }
    .pc-field:first-of-type { margin-top: 22px; }
    .pc-label {
      color: #30363f;
      font-size: 14px;
      line-height: 36px;
      text-align: right;
      white-space: nowrap;
    }
    .pc-required {
      margin-right: 8px;
      color: #ef625c;
    }
    .pc-control {
      width: 352px;
      height: 36px;
      padding: 0 14px;
      border: 1px solid #dfe3e8;
      border-radius: 19px;
      outline: none;
      background: #fff;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
      transition: border-color .15s, box-shadow .15s;
    }
    select.pc-control {
      padding-right: 34px;
      color: #606976;
      cursor: pointer;
    }
    .pc-control::placeholder,
    .pc-control input::placeholder,
    .pc-textarea-wrap textarea::placeholder,
    .pc-setting-panel input::placeholder { color: #b2b8c0; }
    .pc-control:focus,
    .pc-control:focus-within,
    .pc-textarea-wrap:focus-within,
    .pc-setting-panel input:focus,
    .pc-setting-input-addon:focus-within {
      border-color: #66bd8e;
      box-shadow: 0 0 0 2px rgba(82, 183, 136, .08);
    }
    .pc-control.disabled,
    .pc-control:disabled {
      border-color: #dde1e5;
      background: #f3f3f3;
      color: #b7bbc1;
      cursor: not-allowed;
    }
    .pc-inline-btn {
      width: 76px;
      height: 34px;
      border-radius: 18px;
      background: #73c397;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 3px 8px rgba(69, 170, 117, .14);
    }
    .pc-inline-btn:hover { background: #62b687; }
    .pc-control-addon {
      padding: 0;
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .pc-control-addon input {
      min-width: 0;
      flex: 1;
      padding: 0 14px;
      border: 0;
      outline: 0;
      background: transparent;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
    }
    .pc-control-addon > span {
      width: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dfe3e8;
      color: #5f6873;
      font-size: 13px;
      flex-shrink: 0;
    }
    .pc-field-top { align-items: start; }
    .pc-field-top .pc-label { padding-top: 1px; }
    .pc-textarea-wrap {
      position: relative;
      width: 352px;
      height: 82px;
      border: 1px solid #dfe3e8;
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }
    .pc-textarea-wrap textarea {
      width: 100%;
      height: 100%;
      padding: 10px 13px 22px;
      border: 0;
      outline: 0;
      resize: none;
      background: transparent;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
      line-height: 20px;
    }
    .pc-textarea-count {
      position: absolute;
      right: 10px;
      bottom: 6px;
      color: #a9afb7;
      font-size: 12px;
    }
    .pc-image-section { padding-bottom: 30px; }
    .pc-upload-row {
      margin-top: 26px;
      display: grid;
      grid-template-columns: 96px minmax(0, 1fr);
      align-items: start;
      column-gap: 10px;
    }
    .pc-upload-row.detail-row { margin-top: 28px; }
    .pc-upload-label {
      color: #30363f;
      font-size: 14px;
      line-height: 20px;
      text-align: right;
    }
    .pc-upload-box {
      position: relative;
      width: 92px;
      height: 92px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 7px;
      overflow: hidden;
      border: 1px dashed #d9dee4;
      background: #fff;
      color: #414852;
      cursor: pointer;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
    }
    .pc-upload-box:hover { border-color: #6cbd91; background-color: #f8fcfa; }
    .pc-upload-box input { display: none; }
    .pc-upload-plus {
      color: #aab1ba;
      font-size: 23px;
      font-weight: 300;
      line-height: 20px;
    }
    .pc-upload-text { font-size: 13px; }
    .pc-upload-box.has-image {
      border-style: solid;
      border-color: #dfe4e9;
    }
    .pc-upload-box.has-image .pc-upload-plus,
    .pc-upload-box.has-image .pc-upload-text { display: none; }
    .pc-upload-tip {
      margin-top: 10px;
      color: #a3aab4;
      font-size: 12px;
      line-height: 18px;
      white-space: nowrap;
    }
    .pc-upload-row.detail-row .pc-upload-tip { white-space: normal; }

    /* ===== 商品详情图挑选（多规格面板）=====
       上传框左侧是「对外展示」位（当前对外那张），右侧是其余候选图；
       拖右侧的图到左侧展示位即换展示图。缩略图复用
       web-pages-retail-product-bind.css 的 .pc-bind-thumb 占位体系 */
    .pc-detail-strip {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .pc-detail-head {
      position: relative;
      width: 92px;
      height: 92px;
      flex-shrink: 0;
      /* 必须是 flex：卡片是 <span>，落在块容器里会退化成行内元素，
         width/height 一并失效 → 整张卡塌成一条竖线，图和「对外展示」角标都不显示 */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .pc-detail-head.is-empty {
      padding: 0 8px;
      text-align: center;
      border: 1px dashed #dfe4e9;
      background: #fbfcfd;
    }
    .pc-detail-head-empty {
      color: #b6bcc5;
      font-size: 12px;
      line-height: 18px;
    }
    /* 悬停提示：松手即把拖来的那张换成对外展示图 */
    .pc-detail-head.is-over { border-color: #40a873; background-color: #f2fbf6; }
    .pc-detail-head.is-over > .pc-detail-card {
      border-color: #40a873;
      border-style: dashed;
      box-shadow: none;
    }
    .pc-detail-picker {
      flex: 1;
      min-height: 92px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      gap: 8px;
    }
    .pc-detail-picker.is-empty {
      align-items: center;
      justify-content: center;
    }
    .pc-detail-empty {
      color: #b6bcc5;
      font-size: 12px;
      line-height: 18px;
    }
    .pc-detail-card {
      /* 显式块化：卡片标签是 <span>，靠 flex 父容器兜底不够稳，直接写死更保险 */
      display: block;
      position: relative;
      width: 92px;
      height: 92px;
      flex-shrink: 0;
      border: 1px solid #dfe4e9;
      background: #fff;
      cursor: grab;
    }
    .pc-detail-card > .pc-bind-thumb {
      position: absolute;
      inset: 0;
      z-index: 1;
    }
    .pc-bind-thumb.is-photo { font-size: 0; }
    .pc-detail-card.is-current {
      border-color: #40a873;
      box-shadow: 0 0 0 2px rgba(64, 168, 115, .18);
    }
    .pc-detail-flag {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      height: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(64, 168, 115, .92);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .pc-detail-card:not(.is-current) .pc-detail-flag { display: none; }
    .pc-detail-card.is-dragging { opacity: .4; }
    .pc-detail-card.is-over {
      border-color: #40a873;
      border-style: dashed;
    }
    .pc-advanced-section { min-height: 270px; padding-bottom: 28px; }
    .pc-setting-row {
      width: 310px;
      min-height: 28px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .pc-setting-label {
      width: 140px;
      color: #30363f;
      font-size: 14px;
      text-align: right;
    }
    .pc-switch {
      position: relative;
      width: 52px;
      height: 24px;
      display: inline-flex;
      flex-shrink: 0;
      cursor: pointer;
    }
    .pc-switch input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    .pc-switch-track {
      position: relative;
      width: 52px;
      height: 24px;
      border-radius: 13px;
      background: #c6c9cd;
      color: #fff;
      font-size: 11px;
      line-height: 24px;
      transition: background .16s ease;
    }
    .pc-switch-track::before {
      content: '';
      position: absolute;
      left: 3px;
      top: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(36, 44, 54, .18);
      transition: transform .16s ease;
    }
    .pc-switch-text {
      display: block;
      padding-left: 24px;
      white-space: nowrap;
    }
    .pc-switch input:checked + .pc-switch-track { background: #67bd8d; }
    .pc-switch input:checked + .pc-switch-track::before { transform: translateX(28px); }
    .pc-switch input:checked + .pc-switch-track .pc-switch-text { padding-left: 7px; }
    .pc-setting-panel {
      width: 450px;
      margin: 12px 0 4px 96px;
      display: none;
      grid-template-columns: 92px 260px;
      align-items: center;
      gap: 10px;
      color: #4b535e;
      font-size: 13px;
    }
    .pc-setting-panel.show { display: grid; }
    .pc-setting-panel > label { text-align: right; }
    .pc-setting-panel > input,
    .pc-setting-input-addon {
      width: 260px;
      height: 34px;
      border: 1px solid #dfe3e8;
      border-radius: 18px;
      outline: 0;
      background: #fff;
      color: #343b45;
      font-family: inherit;
      font-size: 13px;
    }
    .pc-setting-panel > input { padding: 0 13px; }
    .pc-setting-input-addon {
      display: flex;
      align-items: stretch;
      overflow: hidden;
    }
    .pc-setting-input-addon input {
      min-width: 0;
      flex: 1;
      padding: 0 13px;
      border: 0;
      outline: 0;
      background: transparent;
      font-family: inherit;
    }
    .pc-setting-input-addon span {
      width: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-left: 1px solid #dfe3e8;
      flex-shrink: 0;
    }
    .pc-advanced-note {
      width: 510px;
      min-height: 64px;
      margin-top: 22px;
      padding: 20px 14px;
      display: flex;
      align-items: flex-start;
      border-radius: 2px;
      background: #f5f7fa;
      color: #30363f;
      font-size: 13px;
      line-height: 22px;
    }
    .pc-advanced-note span {
      margin-right: 5px;
      color: #ef625c;
    }
    .pc-actions {
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 18px;
      border-radius: 5px;
      background: #fff;
      box-shadow: 0 1px 3px rgba(30, 42, 62, .025);
    }
    .pc-action {
      min-width: 98px;
      height: 36px;
      padding: 0 24px;
      border: 1px solid #d9dee4;
      border-radius: 19px;
      background: #fff;
      color: #3d444e;
      font-size: 13px;
      font-weight: 700;
    }
    .pc-action:hover { border-color: #71bd91; color: #4aaa77; }
    .pc-action.primary {
      border-color: #73c397;
      background: #73c397;
      color: #fff;
      box-shadow: 0 4px 10px rgba(69, 170, 117, .15);
    }
    .pc-action.primary:hover { background: #62b687; color: #fff; }

    /* ===== 编辑商品提示条（与新增商品共用同一张表单） ===== */
    .pc-edit-banner {
      margin-bottom: 12px;
      padding: 9px 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      border: 1px solid #cfe9dc;
      border-left: 3px solid #73c397;
      border-radius: 6px;
      background: #f3fbf7;
    }
    .pc-edit-banner-main {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .pc-edit-badge {
      flex-shrink: 0;
      padding: 1px 8px;
      border-radius: 9px;
      background: #73c397;
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .3px;
    }
    .pc-edit-banner-name {
      color: #20252d;
      font-size: 13px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .pc-edit-banner-meta {
      flex-shrink: 0;
      color: #7c8899;
      font-size: 12px;
    }
    .pc-edit-back {
      height: 26px;
      flex-shrink: 0;
      padding: 0 12px;
      border: 1px solid #cfe9dc;
      border-radius: 13px;
      background: #fff;
      color: #40a873;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
    }
    .pc-edit-back:hover { background: #eef8f3; }

    @media (max-width: 1180px) {
      .pc-section { padding-left: 44px; padding-right: 44px; }
      .pc-field { grid-template-columns: 88px 340px minmax(0, 1fr); }
      .pc-control,
      .pc-textarea-wrap { width: 340px; }
      .pc-upload-row { grid-template-columns: 88px minmax(0, 1fr); }
    }
    /* 多规格模式样式见 web-pages-retail-product-create-multi.css */