/*
 * 定期便（商品ID 1560）の選択欄。
 *
 * 見た目は既存の選択欄（astra-subscription-support/selects.css）に合わせる。
 * 角丸999px・細い白枠・白文字・背景なし。選択中だけ枠と背景を変える。
 *
 * 指定はすべて body.postid-1560 に限定する。他の商品ページには当たらない。
 */

/* ボタンを出したら、実体の <select> は画面から隠す（DOM には残す）。 */
body.postid-1560 .composite_form select.astra-sub-ui-ready,
body.postid-1560 .composite_form .component_options select.component_options_select.astra-sub-ui-ready {
  display: none !important;
}

/* 見せない欄（プラン・同梱品）。 */
body.postid-1560 .composite_form .astra-sub-hidden-component {
  display: none !important;
}

/* バリエーションの表の見出し（「カラー」「サイズ」）はこちらで出すので隠す。 */
body.postid-1560 .composite_form tr.astra-sub-device__attribute th,
body.postid-1560 .composite_form tr.astra-sub-device__attribute label {
  display: none !important;
}

body.postid-1560 .astra-sub-device__heading {
  margin: 18px 0 6px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

body.postid-1560 .astra-sub-device {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}

/* サイズのように選択肢が多いものは4列。狭い画面では2列に折り返す。 */
body.postid-1560 .astra-sub-device--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media screen and (max-width: 480px) {
  body.postid-1560 .astra-sub-device--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.postid-1560 .astra-sub-device__button {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  text-align: center;
  color: #fff;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

body.postid-1560 .astra-sub-device__button:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

body.postid-1560 .astra-sub-device__button:focus-visible {
  outline: none;
  border-color: var(--astra-cyan, #6ee7f2);
}

/* 選択中。枠を明るくし、ごく薄い背景を敷いて一目で分かるようにする。 */
body.postid-1560 .astra-sub-device__button.is-selected {
  border-color: var(--astra-cyan, #6ee7f2);
  background-color: rgba(110, 231, 242, 0.12);
}

/* 在庫切れなどで選べない場合。 */
body.postid-1560 .astra-sub-device__button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── 仕上げ（2026-09-26） ───────────────────────────── */

/* バリエーションの欄（Tシャツ）の見出しは、こちらで「Tシャツのカラーを選ぶ」等を
   出しているので、プラグイン側のタイトルは隠す。 */
body.postid-1560 .composite_form .astra-sub-variation-component .component_title_wrapper,
body.postid-1560 .composite_form .astra-sub-variation-component .component_section_title {
  display: none !important;
}

/* バリエーションの「クリア」リンクは、ボタンで選び直せるので出さない。 */
body.postid-1560 .composite_form .reset_variations {
  display: none !important;
}

/* 「在庫あり」は出さない（選べる状態が普通なので、わざわざ知らせない）。 */
body.postid-1560 .composite_form p.stock.in-stock,
body.postid-1560 .composite_form .stock.in-stock {
  display: none !important;
}

/*
 * 「在庫切れ」や選択を促す案内。
 *
 * もとは赤い文字だけで、背景の紫グラデーションに重なると読みづらい。
 * 文字を淡い赤にし、暗い下地と細い枠を敷いて、どの位置でも読めるようにする。
 */
body.postid-1560 .composite_form p.stock.out-of-stock,
body.postid-1560 .composite_form .stock.out-of-stock,
body.postid-1560 .composite_form .composite_message {
  display: block;
  margin: 8px 0 0;
  padding: 10px 14px;
  color: #ffd9d9;
  font-size: 13px;
  line-height: 1.6;
  background-color: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 138, 138, 0.6);
  border-radius: 10px;
}

body.postid-1560 .composite_form .composite_message ul,
body.postid-1560 .composite_form .composite_message li {
  margin: 0;
  padding: 0;
  list-style: none;
  color: inherit;
}