/**
 * 複合商品（WooCommerce Composite Products）のコンポーネント選択 UI。
 *
 * プラグイン既定は float ベースの旧レイアウトで、PDP 右カラムの幅を前提にしていない。
 * ここでコンポーネントを縦1列に積み直し、商品カード・一覧と同じ意匠
 * （角丸 10px・ボーダーレス寄り・余白多め・基調色 --mymoods-blue）に揃える。
 *
 * 商品は2群に分かれる:
 *   - static（選択肢1つ＝選ぶ余地なし / 全体の約7割）… プラグインが .component_options を隠す。
 *     「セット内容」の読み取り専用リストとして見せる。
 *   - 選択あり（最大28択 × コンポーネント最大10個）… 択数が多いためドロップダウンを維持し、
 *     幅・ラベル・選択中サムネイルを整える。
 */

/* ===== コンポーネントを縦1列に積む ===== */
/* 横並びの主因（.mymoods-pdp form.cart の flex）は mymoods-overrides.css 側で除外済み。 */
.composite_form .composite_component {
  display: block;
  width: 100%;
  float: none;
  margin: 0 0 1.6rem;
  padding: 1.6rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  background: #fff;
  box-sizing: border-box;
}
.composite_form .composite_component::after {
  content: '';
  display: table;
  clear: both;
}

/* ===== コンポーネント見出し（POD 1つ目 / おすすめPOD #1 など） ===== */
.composite_form .component_title_wrapper {
  margin: 0 0 1rem;
}
.composite_form .component_title_text {
  font-family: var(--mymoods-font-poppins), sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #1a1a1a;
}

/* ===== 選択欄（ドロップダウン） ===== */
.composite_form .component_section_title {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}
.composite_form .component_options_select_wrapper {
  width: 100%;
}
.composite_form .component_options_select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 1.1rem 3.2rem 1.1rem 1.4rem;
  font-size: 1.5rem;
  line-height: 1.4;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.4rem center;
}
.composite_form .component_options_select:focus {
  outline: none;
  border-color: var(--mymoods-blue);
  box-shadow: 0 0 0 3px rgba(var(--mymoods-blue-rgb), 0.12);
}

/* ===== 選択中の内容（サムネイル＋商品名＋在庫） ===== */
.composite_form .component_summary {
  margin: 1.2rem 0 0;
}
/* プラグイン既定の枠線は選択済みの1件だけに付いて不揃いに見えるため打ち消す。 */
.composite_form .component_summary .summary_content {
  border: none;
  padding: 0;
  background: transparent;
}
.composite_form:not(.paged) .component .component_inner {
  padding-bottom: 0 !important;
}
.composite_form .step_title_wrapper {
  margin-bottom: 0 !important;
}
.component .composited_product_title_wrapper {
  padding-top: 0;
}
.composite_form .component_summary .summary_content > .images,
.composite_form .component_summary .summary_content > a > img,
.composite_form .component_summary .summary_content img {
  flex: 0 0 auto;
  width: 6.4rem;
  height: 6.4rem;
  object-fit: cover;
  border-radius: 8px;
  background: var(--mymoods-placeholder-gray, #dddfe1);
}
.composite_form .component_summary .summary_content > .summary,
.composite_form .component_summary .summary_content > .details {
  flex: 1 1 auto;
  min-width: 0;
}
.composite_form .component_summary .title,
.composite_form .component_summary .product_title {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.5;
  color: #1a1a1a;
  /* 日本語の商品名が1文字ずつ折り返すのを防ぐ。 */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ===== 在庫表示 ===== */
/* プラグイン既定は在庫数がオリーブ色でサイト意匠から浮くため、意味だけ残して色を揃える。 */
.composite_form .stock {
  margin: 0.4rem 0 0;
  font-size: 1.3rem;
  font-weight: 600;
}
.composite_form .stock.in-stock {
  color: rgb(21, 136, 8);
}
.composite_form .stock.out-of-stock,
.composite_form .stock.insufficient-stock {
  color: #d6322c;
}

/* ===== static（選択肢1つ）＝「セット内容」リスト ===== */
/* .component_options はプラグインが display:none にする。見出しの語もここでは不要。 */
.composite_form .component.static {
  padding: 1.2rem 1.6rem;
}
.composite_form .component.static .component_title_text {
  font-size: 1.4rem;
  color: rgba(0, 0, 0, 0.55);
  font-weight: 600;
}
.composite_form .component.static .component_summary {
  margin-top: 0.8rem;
}

/* ===== 合計・カートボタン ===== */
.composite_form .composite_price,
.composite_form .composite_availability {
  margin: 1.2rem 0;
}
.composite_form .composite_add_to_cart_button {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
/* ボタンの文字が「カートに入れ る」のように途中で折れるのを防ぐ。 */
.composite_form .single_add_to_cart_button {
  white-space: nowrap;
  min-height: 4.4rem;
  padding: 1.1rem 2.8rem;
}
.composite_form .quantity input {
  width: 6.4rem;
  text-align: center;
}

/* ===== スマホ ===== */
@media screen and (max-width: 749px) {
  .composite_form .composite_component {
    padding: 1.2rem;
  }
  .composite_form .component_summary .summary_content img {
    width: 5.6rem;
    height: 5.6rem;
  }
  .composite_form .single_add_to_cart_button {
    width: 100%;
    justify-content: center;
  }
}