/* 組み合わせ商品（スターターキット CHOOSE YOUR POD＋DEVICE、DEVICE）の選択欄。
 *
 * ## なぜ必要か
 *
 * 選択欄は Composite Products が出す。テーマ側で何もしないとプラグイン素のままで、
 * 同じスターターキットでもバリエーション商品（KINMOKUSEI＋DEVICE など）と見た目が
 * 揃わない。実際に並べると、片方は丸いボタン、片方は OS が描くプルダウン、
 * 見出しの文字も英語（Available options: / Your selection:）という状態だった。
 *
 * ここでは**バリエーション商品の選択欄に合わせる**。
 * 見出しの出方・余白・ボタンの形を `.variations` と同じにして、商品タイプが違う
 * ことが見た目に出ないようにする。
 *
 * <select> をボタン / ドロップダウンに置き換えるのは assets/select-picker.js。
 * 置き換え後の見た目は component-select-picker.css（バリエーションと共通）。
 * 選択肢の絞り込み（ニコチン濃度）と表示名の短縮は assets/composite-options.js。
 * このファイルは「その周り」だけを扱う。
 *
 *   出すもの   コンポーネント名（DEVICE / POD）と選択欄
 *   出さないもの 説明文・「選択肢」「選択中」の見出し・選んだ中身のサムネイル
 *
 * 出さないものは、どれもバリエーション商品の選択欄には無い。同じキットなのに
 * 商品タイプの違いが見た目に出ないよう、そちらに揃えている。
 *
 * 英語の文言は inc/composite.php で日本語にしている。
 */

.astra-pdp {
  /* 数量とボタンを横並びにする form.cart の指定が、そのままだとコンポーネント
   * （DEVICE / POD）を横に並べてしまう。バリエーション商品の variations_form と
   * 同じく縦積みに戻す。 */
  .astra-product-form form.composite_form {
    display: block;
  }

  /* 欄が11本並ぶ商品（BUILD YOUR ASTRA SET 1）だと、1本あたりの余白がそのまま
   * 縦の長さになる。見出しを消した欄は、ピル同士の間隔だけで切れ目が分かるので
   * そこまで詰める。プラグインが .component_inner に持たせている下余白（30px）も削る。 */
  .composite_component + .composite_component {
    margin-top: 0;
  }

  /* プラグインが .composite_form:not(.paged) .component .component_inner に
   * padding-bottom: 3rem を当ててくる。:not() のぶんクラス数が多く、
   * .composite_component .component_inner では負ける。同じ形で書いて上書きする。 */
  .composite_form:not(.paged) .component .component_inner {
    padding-bottom: 0;
  }

  /* 本数の欄（POD-個数）の直前だけは、見出しが前の欄のピルにくっつかないよう空ける。
   * カラーと数は選ぶものが別なので、ここで一段切りたい。 */
  .composite_component[data-nav_title="DEVICE カラー"] + .composite_component {
    margin-top: 24px;
  }

  /* コンポーネント名（DEVICE / POD）は、バリエーションのラベル（ニコチン など）と
   * 同じ扱いにする。プラグインは h2 で出すが、見出しとしてではなく
   * 「何を選ぶ欄なのか」を示すラベルとして見せたい。 */
  .composite_component .component_title {
    display: block;
    margin: 0 0 4px;
    color: #8C8C8C;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
  }

  /* 読み上げ用の複製。目で見えると同じ語が 2 回並ぶ。 */
  .composite_component .aria_title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* 説明文（「DEVICEのカラーを選んでください。」「フレーバーとニコチン濃度を
   * 選んでください。」）は出さない。すぐ上のコンポーネント名（DEVICE / POD）と
   * すぐ下の選択欄で用は足りていて、バリエーション商品の側にも無い。
   * 文言そのものは管理画面に残してあるので、出したくなったらこの指定を外す。 */
  .composite_component .component_description_wrapper {
    display: none;
  }

  /* 「選択肢」「選択中」の見出し。すぐ上のコンポーネント名と役割が重なるので出さない
   * （バリエーション商品にも無い）。
   *
   * `.component_section_title` は3か所で使い回されている。プルダウンの上の見出し、
   * ラジオボタンの上の見出し（span.select_label）、そして選んだ中身の名前。
   * どれも同じ理由で出さない。 */
  .composite_component .component_section_title,
  .composite_component .select_label {
    display: none;
  }

  /* DEVICE はプラグインの設定が「ラジオボタン」になっている。そのままだと
   * バリエーション商品のカラー選択（丸いボタンが横並び）と揃わないので、
   * ラジオボタンは出さず、値の持ち主である <select> のほうを表に出す。
   * select-picker.js が選択肢2つを見てボタンに置き換える。
   *
   * ★プラグインの JS はラジオボタンを触っても最後は <select> を書き換えているので、
   *   隠しても選択の仕組みは変わらない（assets/composite-options.js の説明を参照）。
   * ★!important が要る。プラグインが「ラジオボタン表示だから」と <select> の囲みに
   *   style="display:none" を直接書き込むため、セレクタを強くしても勝てない。
   *
   * 管理画面でこのコンポーネントの表示方法を「ドロップダウン」に変えても同じ形になる。
   * ただし設定は git に載らず店ごとにずれるので、コード側で決める。 */
  .composite_component .component_option_radio_buttons {
    display: none;
  }

  .composite_component .component_options_select_wrapper {
    display: block !important;
  }

  /* ニコチン濃度のボタン（assets/composite-options.js が作る）。
   * すぐ下のフレーバーのプルダウンと組で1つの選択に見えるよう、間隔は詰める。 */
  .composite_component .astra-composite-nicotine {
    margin-bottom: 12px;
  }

  /* 濃度のボタンは、狭い画面でも横一列を崩さない。
   *
   * 「どちらか一方」を選ぶ2つ組なので、縦に折り返すと「上下2つの別の選択」に見える。
   * 既定のピルは min-width 120px ＋ 左右 24px の余白があり、英語表示の
   * 「Nicotine 3％」だと2つで画面の幅を超えて折り返していた。
   *
   * 折り返しを止めたうえで、横の余白を詰めて縮める余地を作る。ピル自体は
   * min-width 120px を下限に縮むので、2つ並べても 252px + 隙間 12px に収まる
   * （スマホの本文幅は 375px の端末で 345px＝.page-width の左右 1.5rem を引いた幅）。
   *
   * 出どころは2通りある。どちらも同じ「濃度の2つ組」なので揃える。
   *   フレーバーと同じ欄に差し込むボタン  … .astra-composite-nicotine
   *   欄そのものが濃度の選択になっているもの … 印を composite-options.js が立てる
   *     （ASTRΛ Launch Pack の「POD」・ASTRΛ GALAXY SET の「ニコチン」） */
  .composite_component .astra-composite-nicotine,
  .composite_component[data-astra-nicotine-choice] .astra-picker-pills {
    flex-wrap: nowrap;
  }

  .composite_component .astra-composite-nicotine .astra-picker-pill,
  .composite_component[data-astra-nicotine-choice] .astra-picker-pill {
    /* 伸ばさず、狭いときだけ縮める。広い画面での見た目は変えない。 */
    flex: 0 1 auto;
    padding: 0 12px;
    /* 縮んだときにピルの中で「Nicotine」と「3％」が上下に割れないようにする。 */
    white-space: nowrap;
  }

  /* <select> 自体は出さない。値の持ち主として残すだけで、操作するのは
   * select-picker.js が同じ囲みの中に作るボタン / ドロップダウン。
   *
   * 置き換え済み（.astra-picker-select--replaced）に限らず消しているのは、
   * 置き換わるまでの一瞬だけ OS 標準の箱が見えてしまうため。JS が動かない環境では
   * そもそもプラグインが選択肢を入れないので、残しても操作できない。
   *
   * プラグイン側が `.component_options select` で指定してくるため、クラス数を
   * 1 つ多くして確実に勝たせる。 */
  .composite_form .component_options select.component_options_select {
    display: none;
  }

  /* 本数のボタン（3個 / 5個 / 8個）。文字が数字だけになるので、幅を中身なりに詰める。
   *
   * 既定のピルは min-width 120px。「3個」で 120px を取ると、3つで 384px になって
   * スマホ（本文幅 345px）では折り返すうえ、ボタンの大半が余白になる。
   * 「POD 3個」だった頃の名残なので、文字が短くなるのに合わせて詰める。
   *
   * 印は composite-options.js が立てる（欄の名前ではなく選択肢の顔ぶれで決まる）。 */
  .composite_component[data-astra-pod-count] .astra-picker-pills {
    flex-wrap: nowrap;
  }

  .composite_component[data-astra-pod-count] .astra-picker-pill {
    flex: 0 1 auto;
    min-width: 72px;
    padding: 0 16px;
    white-space: nowrap;
  }

  /* 選んだ中身の枠。バリエーション商品では、選ぶと**上のギャラリーの画像が
   * 差し替わる**だけで、選択欄の下に何かが増えることは無い。組み合わせ商品でも
   * それに揃えて、選んだ商品のサムネイルは出さない。
   *
   * ★枠そのもの（.component_summary）は残すこと。中身がバリエーション商品
   *   （ニコチン濃度を持つ POD など）の場合、その選択欄がここに差し込まれる。
   *   枠ごと消すと選べなくなってカートに入らない。 */
  .composite_component .component_summary {
    margin-top: 0;
  }

  .composite_component .composited_product_images {
    display: none;
  }

  /* --- 中身がバリエーション商品のとき（ASTRΛ Launch Pack の T シャツ）------
   *
   * 選択欄は .component_summary の中に差し込まれる。プラグイン素のままだと
   *   ・在庫管理用の内部属性（nicotine_item_count）の選択欄
   *   ・「クリア」リンク
   * も並び、しかも1段ぶん右に寄って他の選択欄と左端が揃わない。
   * 要らないものを落として、他の欄と同じ位置に揃える。
   *
   * 見出し（.label）は出す。色・サイズの2欄が並ぶうえ、上下には Device や
   * フレーバーの欄もあるので、選択肢だけでは何を選ぶ欄なのかが読み取れない
   * （S / M / L / XL は特に、丸い印が並んでいるだけに見える）。
   * 文字は assets/composite-labels.js が「Tシャツ-カラー」の形に直す
   * （プラグインが出すのは属性名だけの「カラー」で、どの同梱物の話かは
   * 目に見えない注記〈ASTRΛ T-shirt 向け〉にしか入っていない）。
   * 見た目は単品の商品ページの見出しと共通（section-main-astra-product.css の
   * `.variations .label label`。組み合わせ商品のページにも .astra-pdp が付く）。
   *
   * ★見出しが出るのは、いま Launch Pack の T シャツだけ。この店で
   *   バリエーション商品はそれ1つで、他の組み合わせ商品（GALAXY SET・
   *   スターターキット・DEVICE）の中身はすべて単純商品なので、この欄自体が出ない。 */

  /* 必須マーク（*）は出さない。
   *
   * プラグインはバリエーション商品の欄にだけこれを付ける。同じ画面の他の欄
   * （Device Color・POD-Nicotine・POD-Flavour）はどれも必須なのに付かないので、
   * 2つの欄にだけ赤い印が立って、そこだけ別の意味があるように見える。
   * 選べていないことは、選択欄が「選択してください」のままなのと、
   * 「カートに追加」が押せないことで分かる。 */
  .composite_component .variations .required {
    display: none;
  }

  /* 内部属性の欄は客に見せない。選択肢が1つしか無いので、
   * assets/hidden-variation-attribute.js が代わりに選んでおく
   * （選ばれていないとカートに追加できないため）。 */
  .composite_component .variations .attribute_options:has(select[name*="nicotine_item_count"]) {
    display: none;
  }

  .composite_component .variations .reset_variations {
    display: none;
  }

  /* 他の選択欄（Device・POD）と左端を揃える。
   * プラグインは中身の情報を float: right の細い段に入れ、さらに左に 24px
   * 余白を取る（写真を左・説明を右に置く前提の作り）。写真は出していないので、
   * 段を作らず横いっぱいに戻す。 */
  .composite_component .composited_product_details_wrapper > .details.component_data {
    /* プラグイン側は
     * .component:not(.selection_thumbnail_hidden) .composited_product_details_wrapper > .details
     * （クラス4つ）。同数だと後勝ちで負けるので、1つ多くして確実に勝たせる。 */
    float: none;
    width: 100%;
    padding-left: 0;
  }

  /* 選択欄同士の縦の空きは、セット商品のフレーバー欄と同じ 13px。 */
  .composite_component .variations .attribute_options + .attribute_options {
    margin-top: 13px;
  }

  /* 選択欄の下の空きを詰める。
   *
   * 空きの正体は .composited_product_title_wrapper の上余白（1.618em＝25.9px）。
   * 中の「選択中」と商品名はどちらも非表示にしているので、どの欄でも余白だけが
   * 残って選択欄同士を離している。バリエーション商品の選択欄（Launch Pack の
   * 色・サイズ）と同じ 13px に揃える。 */
  .composite_component .composited_product_title_wrapper {
    padding-top: 13px;
  }

  /* ただし最後の欄は詰める。この空きは「欄と欄の間」を作るためのもので、
   * 最後の欄の下には次の欄が無く、あるのは「カートに追加」の行だけ。残すと
   * 13px + .composite_button の余白 が積み上がり、CTA の上だけ広くなる
   * （下はアコーディオンの 2.5rem）。CTA の上下を同じ幅にするため、
   * 上側は .composite_button の margin-top だけで決める。 */
  .composite_component:last-child .composited_product_title_wrapper {
    padding-top: 0;
  }

  /* Launch Pack の「フレーバー」もプラグインの見出し（h2）は出さない。
   * この欄には composite-options.js が「POD-Flavour」の見出しを出すので、
   * h2 まで残すと同じことを2行書くことになる（下の「見出しを出さない欄」と同じ理由。
   * 名前がちょうど「フレーバー」なので、あちらの POD 系のセレクタには当たらない）。 */
  .composite_component[data-nav_title="フレーバー"] > .component_title_wrapper {
    display: none;
  }

  /* --- 合計とカート追加 ------------------------------------------------- */

  /* 価格は上の #price-astra が既に出している。プラグインの合計表示をそのまま
   * 出すと同じ金額が 2 か所に並ぶ。
   * 中身ごとに価格を付ける（priced_individually）構成にするときは、
   * 上の価格が範囲表示になるので、ここを出す側に切り替えること。
   *
   * !important が要る。プラグインが JS で `style="display:block"` を要素に直接
   * 書き込むため、セレクタをいくら強くしても勝てない。 */
  .composite_price {
    display: none !important;
  }

  /* 中身ごとに価格を付ける商品でも隠したままにする。合計は
   * assets/composite-price.js が商品名の下（#price-astra）へ写して出す。
   * 隠れていても中身は更新されるので、写す側はそれを読める。 */

  /* クライアント指定: CTA（数量＋カートに追加）の上下の余白を同じ幅にする。
   *
   * 下側はアコーディオンの margin-top（component-accordion.css の 2.5rem）で決まる。
   * 隣り合う余白は大きいほうに揃うので、こちら側を小さくしても下は 2.5rem のまま。
   * だから上側も 2.5rem に合わせる。片側だけ数字を変えると崩れるので、
   * 変えるときは両方（と上の :last-child の 0）を一緒に見ること。 */
  .composite_button {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2.5rem;
  }

  .composite_button .single_add_to_cart_button {
    flex: 1 1 auto;
  }

  .composite_availability:empty,
  .composite_status .wrapper:empty {
    display: none;
  }

  /* クライアント指定: 「未選択です」的な検証メッセージ一覧（例:
   * 「Tシャツ → 選択してください。」）は出さない。個々のコンポーネント側に
   * 必須マーク（*）と、選べていないと押せない「カートに追加」で十分伝わる。 */
  .composite_status {
    display: none !important;
  }

  /* クライアント指定: 選択肢が1つの Simple 商品を固定で同梱するだけの
   * コンポーネント（ASTRA Launch Pack のステッカー等）は、選ぶことも
   * サムネイルで確認することも不要（同梱物は商品説明の一覧に書いてある）。
   * ブロックごと消す（見出しだけ残すと空欄が残る）。 */
  .composite_component[data-nav_title="ステッカーA"],
  .composite_component[data-nav_title="ステッカーB"] {
    display: none !important;
  }

  /* プラグインの見出し（h2）を出さない欄。
   *
   * 名前は管理画面で付けたもので、同じ役目の欄でも商品ごとに揺れる
   * （濃度を選ぶ欄が「ニコチン」だったり「POD」だったり）。代わりに
   * composite-options.js が欄ごとに見出しを出すので、こちらは重ねない。
   *
   *   DEVICE / DEVICE カラー … Device Color（下の ::before）
   *   ニコチン / POD          … POD-Nicotine（+ 同じ欄に POD-Flavour が続くことがある）
   *   POD数                  … POD-個数
   *   POD 1〜8               … POD 1-Flavour …
   *   Tシャツ                 … Tシャツ-カラー / Tシャツ-サイズ
   *                            （composite-labels.js。h2 は日本語のままなので、
   *                              英語ページでは「Tシャツ」と「T-Shirt Colour」が並んでいた）
   */
  .composite_component[data-nav_title="Tシャツ"] > .component_title_wrapper,
  .composite_component[data-nav_title="DEVICE"] > .component_title_wrapper,
  .composite_component[data-nav_title="DEVICE カラー"] > .component_title_wrapper,
  .composite_component[data-astra-device] > .component_title_wrapper,
  .composite_component[data-nav_title="ニコチン"] > .component_title_wrapper,
  .composite_component[data-nav_title="POD"] > .component_title_wrapper,
  .composite_component[data-nav_title="POD数"] > .component_title_wrapper,
  .composite_component[data-nav_title^="POD "] > .component_title_wrapper {
    display: none;
  }


  /* POD の濃度・フレーバーの欄の見出し（POD-Nicotine / POD 1-フレーバー）。
   *
   * 文字は assets/composite-options.js が作る。CSS の ::before ではないのは、
   * 欄ごとに文字が違う（GALAXY SET は POD 1 … POD 8）ため content: では
   * 書き分けられず、読み上げにも乗せたいから。
   *
   * 見た目は他の見出し（Device Color・単品の商品ページのカラー / サイズ）と同じ。 */
  .composite_component .astra-option-heading {
    margin: 0 0 4px;
    color: #8C8C8C;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 14px;
    line-height: 1.4;
  }

  /* デバイスの色の欄にも見出しを出す。
   *
   * この欄はプラグインの見出し（上で消している h2）が管理画面で付けた名前で、
   * 商品によって「DEVICE」だったり「DEVICE カラー」だったりする。英語ページでも
   * 日本語混じりの「DEVICE カラー」が出てしまうので、h2 は消したままにして、
   * ここで言語に合わせた見出しを出す。
   *
   * 隣の POD の欄には「フレーバー」の見出しがあり、こちらだけ無いと、
   * 上の欄が何を選ぶ欄なのか（色なのか本体の種類なのか）が読み取れない。
   *
   * 目印の `data-astra-device` は composite-options.js が立てる（選択肢が全部
   * 「… DEVICE」の欄）。管理画面の名前ではなく選択肢そのもので決まるので、
   * 名前を変えられても付き続ける。
   *
   * 見た目は「フレーバー」と揃える（上の指定と同じ値）。 */
  .composite_component[data-astra-device] .component_options::before {
    content: "Device Color";
    display: block;
    margin: 0 0 4px;
    color: #8C8C8C;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 14px;
    line-height: 1.4;
  }

  /* 日本語ページは「デバイスカラー」。`::before` を入れ子の `&` で書けない事情は
   * 上の「フレーバー」と同じ（:is() が擬似要素を受け付けない）。 */
  body.lang-ja & .composite_component[data-astra-device] .component_options::before {
    content: "デバイスカラー";
  }
}

  /* 「選択したオプションは、以前の選択と互換性がありません。」を出さない。
   *
   * ニコチンの有無を切り替えるとフレーバーの選択肢が入れ替わるため、選び直しは
   * 毎回起きる。そのたびに赤い警告が出ると、操作を間違えたように見える。
   * 選び直しが必要なことは各欄が「選択してください」に戻ることで分かり、
   * 全部選ぶまでカートに追加できない状態は据え置きなので、進めなくなることはない。 */
  .composite_form .composite_message {
    /* !important が要る。プラグインが JS で style="display:block" を要素に
     * 直接書き込むため、セレクタをいくら強くしても勝てない
     * （.composite_price と同じ事情）。 */
    display: none !important;
  }