/* 简洁风格，尽量接近截图布局；按需自己再美化 */
.sbc-wrap { border:1px solid #e5e7eb; border-radius:8px; padding:16px; margin:18px 0; background:#fff; width:100%; }
.sbc-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.sbc-price { font-size:20px; font-weight:700; color:#1e3b6f; }
.sbc-section { border-top:1px solid #eef0f3; padding-top:14px; margin-top:14px; }
.sbc-section-head { display:flex; align-items:center; gap:8px; }
.sbc-section-head h3 { margin:0; font-size:18px; }
.sbc-selected-color-name { font-weight:600; color:#1e3b6f; }

.sbc-color-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:12px; list-style:none; margin:12px 0 0; padding:0; }
.sbc-color button { display:block; width:100%; border:2px solid transparent; border-radius:8px; background:#f8fafc; padding:8px; cursor:pointer; }
.sbc-color:hover button { color:#6b7280; background:transparent; }
.sbc-color button:focus { color:#6b7280; background:transparent; }
.sbc-color img { width:100%; height:auto; border-radius:6px; display:block; }
.sbc-color.is-active button { border-color:#3b82f6; background:#fff; }
.sbc-color.is-active:hover button { color:#6b7280; background:transparent; }
.sbc-color.is-active button:focus { color:#6b7280; background:transparent; }
.sbc-color-title { display:block; text-align:center; margin-top:6px; font-size:12px; }

.sbc-mount-types { display:flex; gap:16px; margin:10px 0; }
.sbc-radio input { margin-right:6px; }
.sbc-help { font-size:12px; color:#6b7280; margin-bottom:10px; }

.sbc-size-grid { display:grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap:16px; }
.sbc-size-col label { font-weight:600; }
.sbc-size-row { display:grid; gap:0; margin-bottom:10px;}
.sbc-size-row select { padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; }

.sbc-feature { margin-top:12px; }
.sbc-feature-title { font-weight:700; margin-bottom:10px; }
.sbc-feature-list { list-style:none; display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:12px; padding:0; margin:0; }
.sbc-feature-option button { 
    width: 100%;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #f8fafc;
    padding: 10px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
 }
.sbc-feature-option img { width:144px; object-fit:contain; }
.sbc-feature-option:hover button { color:#6b7280; background:transparent; }
.sbc-feature-option button:focus { color:#6b7280; background:transparent; }
.sbc-feature-option.is-active button { border-color:#3b82f6; background:#fff; }
.sbc-feature-option.is-active:hover button { color:#6b7280; background:transparent; }
.sbc-feature-option.is-active:hover button:focus { color:#6b7280; background:transparent; }
.sbc-feature-price { font-weight:600; }


@media (max-width: 640px) {
  .sbc-size-grid { grid-template-columns: 1fr; }
}

/* --- Admin repeater --- */
.sbc-repeater h4 { margin: 16px 0 8px; }
.sbc-repeater .sbc-media-cell { display:flex; align-items:center; gap:8px; }
.sbc-repeater .sbc-media-preview img { width:44px; height:44px; object-fit:cover; border:1px solid #e5e7eb; border-radius:4px; }
.sbc-repeater .sbc-image-url { width: 60%; }
.sbc-repeater .button-link-delete { color:#b91c1c; }

/* --- 20250813 --- */
.sbc-mount-options{display:flex;gap:20px;margin:15px 0;width: 54%;height: 196px;}
.sbc-mount-option{flex:1;cursor:pointer;border:2px solid #e0e0e0;border-radius:8px;padding:5px;transition:all 0.3s ease;background:#fff}
.sbc-mount-option:hover{border-color:#007cba;box-shadow:0 2px 8px rgba(0,124,186,0.1)}
.sbc-mount-option input[type="radio"]{display:none}
/*.sbc-mount-option input[type="radio"]:checked + .sbc-mount-visual{border-color:#007cba}*/
.sbc-mount-option input[type="radio"]:checked + .sbc-mount-visual:before{content:"✓";position:absolute;top:10px;right:10px;background:#007cba;color:white;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold}
.sbc-mount-visual{position:relative;text-align:center;border:1px solid transparent;border-radius:6px;padding:10px;transition:border-color 0.3s ease}
.sbc-mount-image{margin-bottom:10px}
.sbc-mount-image img{max-width:100%;height:auto;max-height:120px;object-fit:contain;border-radius:4px}
.sbc-mount-label{font-weight:600;color:#333}
.sbc-mount-title{font-size:16px}
.sbc-mount-info{margin-top:5px;width:45%;}
.sbc-mount-note{display:flex;align-items:flex-start;gap:10px;padding:15px;background:#e7f3ff;border:1px solid #b3d9ff;border-radius:6px;margin-top:10px}
.sbc-note-icon{font-size:18px;margin-top:2px}
.sbc-note-content strong{color:#0073aa;display:block;margin-bottom:5px}
.sbc-note-content p{margin:0;line-height:1.4;color:#555}
.sbc-measurements{margin-top:25px}
.sbc-measurement-help{text-align:right;margin-bottom:15px}
.sbc-help-link{color:#007cba;text-decoration:none;font-weight:500;padding:8px 15px;border:1px solid #007cba;border-radius:4px;transition:all 0.3s ease}
.sbc-help-link:hover{background:#007cba;color:white}
.sbc-size-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:20px}
.sbc-size-col{text-align:center}
.sbc-measure-visual{margin-bottom:15px;min-height:80px;display:flex;align-items:center;justify-content:center}
.sbc-measure-guide{max-width:100%;height:auto;max-height:80px;object-fit:contain}
.sbc-size-label{display:block;font-weight:600;margin-bottom:10px;color:#333}

.sbc-size-row select{padding:8px 12px;border:1px solid #ddd;border-radius:4px;font-size:16px;min-width:80px}
.sbc-ruler{position:relative;height:30px;background:#f5f5f5;border-radius:4px;margin-top:10px}
.sbc-ruler-scale{display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 10px;font-size:12px;color:#666}
.sbc-ruler-pointer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:20px;background:#007cba;border-radius:1px}
@media (max-width:768px){
    .sbc-mount-options{flex-direction:column;gap:15px}
    .sbc-size-grid{grid-template-columns:1fr;gap:20px}
    .sbc-mount-image img{max-height:100px}
}
.sbc-media-cell{position:relative}
.sbc-media-preview{margin-bottom:10px}
.sbc-media-preview img{max-width:100px;height:auto;border:1px solid #ddd;border-radius:4px}
.sbc-media-btn{margin-left:10px}

/* 行布局 */
.sbc-measure-row{display:flex;gap:12px;align-items:center;margin-bottom:30px}

/* 左侧图片 */
.sbc-measure-left{width:120px;text-align:center}
.sbc-measure-guide{max-width:100%;height:auto}

/* 右侧纵向排块 */
.sbc-measure-right{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:0px}
.sbc-size-label{font-weight:600;margin-bottom:4px}
/* 让标签独占一行 */
.sbc-size-label{display:block;margin-bottom:6px;font-weight:600;}
/* 移动端竖排 */
@media(max-width:640px){
  .sbc-measure-row{flex-direction:column;gap:20px}
  .sbc-measure-left{width:auto}
}




/* 折叠效果 & 箭头 */
.sbc-section-head{cursor:pointer;user-select:none;position:relative;padding-right:24px;}
/* 折叠箭头 */
.sbc-toggle{
  position:absolute; right:0; top:50%;
  width:10px; height:10px;
  border-right:2px solid #666; border-bottom:2px solid #666;
  transform:translateY(-60%) rotate(-135deg);          /* 默认朝右 */
  transition:.2s;
}
.sbc-section:not(.is-open) .sbc-toggle{
  transform:translateY(-60%) rotate(45deg);            /* 展开朝下 */
}
.sbc-section-body{display:none;}
.sbc-section.is-open>.sbc-section-body{display:block;}

/* 如果页面有 .sbc-wrap 就把默认 p.price 隐掉 */
.wrap_price_rating .price { display:none; }