/* 商品詳細（PDP）。
 *
 * 根っこのセレクタは、content-single-product.php が出すクラスに合わせて .astra-pdp。
 * 以前は .astra-product を指していたが、そのクラスはどこにも無く、
 * このファイルの指定が丸ごと効いていなかった。 */
.astra-pdp {
  background-color: transparent;

  /* 商品名の上の番号（#01）。デザイン指定では商品名より小さく細い。 */
  .product__number {
    color: #CBCBCB;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-light);
    font-size: 20px;
    line-height: 1.2;
    margin: 0 0 4px;
  }

  .slider-buttons {
    .slider-button {
      color: #CBCBCB;
    }

    .slider-counter {
      color: #CBCBCB;
    }
  }

  .product__title {
    h1 {
      color: white;
      font-family: var(--astra-source-code-pro), sans-serif;
      font-weight: var(--astra-font-weight-light);
      font-size: 40px;
    }
  }

  /* 「Nicotine 3％ | 2ml」のスペック行。ニコチンの有無が出る場所なので、
   * 見出しと同じ白まで上げる（#CBCBCB は周りの注記と同じ明るさで、
   * 一番読ませたい行が一番目立たない状態だった）。 */
  .product__details {
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 18px;
    color: #FFFFFF;
  }

  /* 入荷遅延の案内（astra_stock_delay() が空を返す間は出ない）。 */
  .product__stock-notice {
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.06);
    color: #CBCBCB;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 14px;
    line-height: 1.6;

    /* 送料の案内は入荷案内の次の行に置く（ニコチン POD だけ出る）。 */
    .product__stock-notice-shipping {
      display: block;
      margin-top: 6px;
    }
  }

  .product__tax {
    color: white;
  }

  .quantity__label {
    color: white;
  }

  .price-per-item__container {

    .quantity {
      border-radius: 99999px;
      border: 1px solid #CBCBCB;
      overflow: hidden;
      color: white;

      .svg-wrapper {
        stroke: white;
      }

      &::before {
        background: transparent;
      }

      &::after {
        box-shadow: none;
      }
    }
  }

  /* 価格。商品名（白）と並べて読む数字なので、注記と同じ #CBCBCB から上げる。 */
  .price--large {
    color: #FFFFFF;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 18px;
  }

  .product__accordion {
    color: #CBCBCB;
    font-family: var(--astra-notosansjp), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 16px;

    .svg-wrapper {
      fill: #CBCBCB;
    }

    .accordion__title {
      color: #CBCBCB;
      font-family: var(--astra-notosansjp), sans-serif;
      font-weight: var(--astra-font-weight-medium);
      font-size: 16px;
    }
  }

  /* アコーディオンの▼。開くと component-accordion.css が 180 度回す。 */
  .product__accordion .icon-caret {
    width: 12px;
    height: auto;
    align-self: center;
    flex: 0 0 auto;
    margin-left: 12px;
    color: #CBCBCB;
    transition: transform 0.2s ease;
  }

  /* 「商品仕様」の表（WooCommerce 標準の product-attributes）。 */
  .woocommerce-product-attributes {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--astra-notosansjp), sans-serif;
    font-size: 14px;
    color: #CBCBCB;
  }

  .woocommerce-product-attributes th,
  .woocommerce-product-attributes td {
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding: 12px 0;
    text-align: left;
    vertical-align: top;
    background: transparent;
  }

  .woocommerce-product-attributes th {
    width: 40%;
    font-weight: var(--astra-font-weight-medium);
    color: #8C8C8C;
  }

  .woocommerce-product-attributes p {
    margin: 0;
  }

  /* メイン画像の右上のお気に入りボタン（カードと同じ見た目）。 */
  .astra-gallery__main {
    position: relative;
  }

  .astra-gallery__main .wishlist__button {
    position: absolute;
    z-index: 3;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }

  .astra-gallery__main .wishlist__button--button {
    cursor: pointer;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    background-color: #292929;
    border-radius: 50%;
    border: none;
    color: white;
  }

  /* --- バリエーションの選択（カラー / フレーバー）------------------------
   *
   * ボタンとドロップダウンの見た目は component-select-picker.css（並び替えと共通）。
   *
   * WooCommerce は選択肢を <table class="variations"> の中の <select> で出す。
   * 表のままだとラベルと入力が横並びになり、他の項目（価格・数量）と
   * 段組みが揃わないので、縦積みにする。 */
  .variations,
  .variations tbody,
  .variations tr,
  .variations th,
  .variations td {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    text-align: left;
  }

  .variations tr + tr {
    margin-top: 20px;
  }

  /* 見出し（カラー / サイズ）の見た目は、このファイルの下のほうで指定している。
   * WooCommerce の指定に勝つためにクラス数を増やす必要があり、入れ子の中では
   * 書けないため（`.woocommerce div.product form.cart .variations .label label`）。 */

  /* 客に見せない内部属性（nicotine_item_count）の欄。
   *
   * ASTRΛ T-shirt は、色・サイズのほかにこの属性を持っている（送料の点数を
   * 数える astra-shipping-nicotine が読む）。本来は「バリエーションに利用」を
   * 外しておくものだが、商品データ側で入ってしまっているため、WooCommerce が
   * 「nicotine_item_count」という見出しの選択欄（選択肢は 0 の1つだけ）を出す。
   *
   * ★印が付いた行だけ隠す。印を付けるのは assets/hidden-variation-attribute.js で、
   *   代わりに値を選び終えたときにだけ付く。先に隠してしまうと、JS が動かない
   *   環境では「選べないのに必須」になってカートに追加できなくなる。
   *
   * 「クリア」は残す。WooCommerce はこのリンクを最後の属性の欄に置くので、
   * 行ごと消すと色・サイズを選び直す手段まで一緒に消えてしまう。 */
  .variations tr[data-astra-hidden-attribute] .label,
  .variations tr[data-astra-hidden-attribute] .value > *:not(.reset_variations) {
    display: none;
  }

  /* 見出しも選択欄も出ない行なので、上の欄との間は空けない
   * （「クリア」自身が margin-top を持っている）。 */
  .variations tr[data-astra-hidden-attribute] {
    margin-top: 0;
  }

  /* 「クリア」。WooCommerce は選択後にだけ出す。 */
  .reset_variations {
    display: inline-block;
    margin-top: 12px;
    color: #8C8C8C;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-size: 14px;
  }

  /* 組み合わせが決まったときに出る価格・在庫。 */
  .woocommerce-variation-price {
    margin-top: 16px;

    .price {
      color: #CBCBCB;
      font-family: var(--astra-source-code-pro), sans-serif;
      font-size: 18px;
    }
  }

  .woocommerce-variation-availability {
    color: #8C8C8C;
    font-family: var(--astra-notosansjp), sans-serif;
    font-size: 14px;
  }

  /* WooCommerce の「カートに追加」。数量入力と横並びになるので幅は
     astra-woo.css の flex 指定に任せ、高さと文字だけカードのボタンに揃える。 */
  .single_add_to_cart_button {
    height: 56px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
  }

  .product-form__submit {
    width: 100%;
    margin-inline: auto;
    height: 56px;
    border-radius: 9999px;
    border: 2px solid #4EC3E1;
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
    background-color: transparent;
    color: #4EC3E1;
    font-size: 18px;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    cursor: pointer;
    text-decoration: none;

    &:before, &:after {
      display: none;
    }
  }
}
/* --- WooCommerce 本体の指定を上書きする箇所 --------------------------------
 *
 * WooCommerce は `.woocommerce div.product form.cart .variations select` という
 * クラス4つ・要素3つの指定で、選択欄に display や背景を当ててくる。
 * `.astra-pdp .variations select`（クラス2つ）では負けるため、ここだけは
 * 同じ形に1つクラスを足した指定で書く。!important は使わない。
 *
 * このファイルは woocommerce.css より後に読み込まれるので、同じ強さなら
 * こちらが勝つ（読み込み順は inc/enqueue.php を参照）。 */

/* 置き換えた <select> を隠す指定は component-select-picker.css にある
 * （並び替えと共通のため）。 */

/* バリエーションの選択欄の見出し（カラー / サイズ）。
 *
 * WooCommerce が `.woocommerce div.product form.cart .variations label`（クラス4つ）に
 * font-weight: 700 を当ててくる。`.astra-pdp .variations .label label`（クラス3つ）では
 * 負けるので、ここだけは同じ形にクラスを1つ足して書く（すぐ下の select と同じ事情）。
 *
 * 中身は組み合わせ商品の見出し（section-composite.css の .astra-option-heading）と
 * 同じ値にする。ASTRΛ Launch Pack では「Tシャツ-カラー」と「POD-Nicotine」が
 * 数行違いで並ぶので、片方だけ太字・行間違いだと別の種類の文字に見える。
 * 片方を変えるときは両方を一緒に見ること。 */
.woocommerce div.product form.cart .variations .label label {
  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;
}

/* JS が動かなかったときの保険。素の <select> のままでも操作できるよう、
 * 最低限サイトの配色に寄せておく（WooCommerce の黒い矢印を消す）。 */
.woocommerce div.product form.cart .variations select {
  appearance: none;
  -webkit-appearance: none;
  max-width: 420px;
  min-width: 0;
  height: 48px;
  margin-right: 0;
  padding: 0 5.2rem 0 2rem;
  background-color: rgba(255, 255, 255, 0.06);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' d='M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2rem center;
  background-size: 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  color: #fff;
  font-family: var(--astra-source-code-pro), sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.woocommerce div.product form.cart .variations select option {
  background-color: #111;
  color: #fff;
}

/* 商品名のうしろに付く【うたい文句】は、狭い画面でだけ前で改行する
 * （改行位置は inc/woocommerce.php の astra_product_title_html が入れる）。
 * PC 幅では横幅が足りているので、切ると1行で足りるものが2行になる。 */
.product__title h1 br {
  display: none;
}

@media screen and (max-width: 768px) {
  .product__title h1 br {
    display: inline;
  }
}