/* ============================================================
   sku.css — マルチSKU 選択UIスタイル
   ============================================================ */

/* ─── レイアウト ─────────────────────────────────────────── */
.sku-selector {
  margin: 16px 0;
}

.sku-attr-row {
  margin-bottom: 14px;
}

.sku-required {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  background: #d33;
  color: #fff;
  font-size: 0.72em;
  border-radius: 3px;
  vertical-align: middle;
  font-weight: 400;
}

/* ボタン型: CSS grid で等幅・全幅レイアウト
   2個 → 各50%、3個 → 各33%、4個以上は折り返し */
.sku-options-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

/* ─── select ─────────────────────────────────────────────── */
.sku-select {
  max-width: 320px;
}

.sku-opt-disabled {
  color: #aaa;
}

/* ─── radio ──────────────────────────────────────────────── */
.sku-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9em;
  transition: border-color 0.15s, background 0.15s;
}

.sku-radio-label:hover {
  border-color: #888;
}

.sku-radio-label input[type="radio"] {
  margin: 0;
}

.sku-radio-label.sku-disabled {
  color: #bbb;
  border-color: #e0e0e0;
  cursor: not-allowed;
  background: #f8f8f8;
}

.sku-radio-label.sku-outofstock {
  color: #bbb;
  border-color: #e0e0e0;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* ─── button ─────────────────────────────────────────────── */
/* #sku-selector プレフィックスでIDセレクター使用 → 他テーマCSSより優先 */
#sku-selector .sku-btn {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px;
  width: 100%;
  min-height: 68px;
  padding: 12px 14px !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  background: #fff !important;
  cursor: pointer !important;
  transition: border-color 0.12s, background 0.12s;
  text-align: center !important;
  box-sizing: border-box !important;
  position: relative !important;
  font-size: inherit;
  line-height: normal;
  outline: none;
}

#sku-selector .sku-btn:hover:not(.sku-btn-disabled):not(.sku-btn-outofstock) {
  border-color: #888 !important;
}

/* 選択済み: サイトメインカラー(#71cd14)ボーダー + 白背景 */
#sku-selector .sku-btn.sku-btn-active {
  border: 2px solid #71cd14 !important;
  background: #fff !important;
  outline: none !important;
}

/* 右上チェックマーク */
#sku-selector .sku-btn.sku-btn-active::after {
  content: '✓';
  position: absolute;
  top: 5px;
  right: 8px;
  font-size: 0.75em;
  font-weight: 900;
  color: #5aaa0a;
}

#sku-selector .sku-btn.sku-btn-disabled {
  border-color: #e8e8e8 !important;
  cursor: not-allowed !important;
  background: #fafafa !important;
}

#sku-selector .sku-btn.sku-btn-outofstock {
  border-color: #ddd !important;
  cursor: not-allowed !important;
  background: #fafafa !important;
}

/* ─── ボタン内テキスト要素 ───────────────────────────────── */
#sku-selector .sku-btn-name {
  font-size: calc(0.93em + 2px);
  font-weight: 400;
  color: #333;
  line-height: 1.35;
  word-break: break-word;
}

#sku-selector .sku-btn.sku-btn-disabled .sku-btn-name { color: #bbb; }
#sku-selector .sku-btn.sku-btn-outofstock .sku-btn-name { color: #bbb; text-decoration: line-through; }

#sku-selector .sku-btn-price {
  font-size: 0.88em;
  font-weight: 700;
  color: #c00;
  line-height: 1.2;
}

#sku-selector .sku-btn.sku-btn-disabled .sku-btn-price,
#sku-selector .sku-btn.sku-btn-outofstock .sku-btn-price { color: #ccc; }

#sku-selector .sku-btn-stock {
  font-size: 0.78em;
  line-height: 1.2;
}

#sku-selector .sku-btn-instock { color: #5aaa0a; }
#sku-selector .sku-btn-few     { color: #d07000; font-weight: 600; }
#sku-selector .sku-btn-oos     { color: #c00; }

/* ─── 補足説明 ───────────────────────────────────────────── */
.sku-supp {
  color: #888;
  font-size: 0.85em;
  margin-left: 4px;
}

/* ─── 結果表示エリア ─────────────────────────────────────── */
.sku-result {
  margin: 14px 0 10px;
  padding: 10px 14px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  background: #fafafa;
}

.sku-price-area {
  margin-bottom: 6px;
}

.sku-price-val {
  font-size: 1.5em;
  font-weight: 700;
  color: #c00;
}

.sku-price-unit {
  font-size: 0.9em;
  margin-left: 4px;
  color: #555;
}

.sku-stock-area {
  font-size: 0.9em;
}

/* 在庫状態 */
.sku-state-instock    { color: #27a84c; }
.sku-state-few        { color: #e07b00; font-weight: 600; }
.sku-state-outofstock { color: #c00; font-weight: 600; }
.sku-state-stopped    { color: #888; }

/* ─── エラー表示 ─────────────────────────────────────────── */
.sku-error {
  color: #c00;
  font-size: 0.9em;
  margin: 8px 0;
  padding: 6px 10px;
  border-left: 3px solid #c00;
  background: #fff5f5;
}

/* ─── ラベル ─────────────────────────────────────────────── */
.sku-attr-label {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 1.0em;
}

/* ─── カート数量・ボタン ──────────────────────────────────── */
#sku-qty {
  max-width: 80px;
}

/* ─── モバイル対応 ───────────────────────────────────────── */
@media (max-width: 480px) {
  .sku-options-inline {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }

  .sku-btn {
    padding: 11px 8px;
    font-size: 0.88em;
  }

  .sku-price-val {
    font-size: 1.3em;
  }
}