/* 商品詳細（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;
    }
  }

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

  .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;
      }
    }
  }

  .price--large {
    color: #CBCBCB;
    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;
  }

  .variations .label label {
    display: block;
    margin-bottom: 8px;
    color: #8C8C8C;
    font-family: var(--astra-source-code-pro), sans-serif;
    font-weight: var(--astra-font-weight-medium);
    font-size: 14px;
  }

  /* 「クリア」。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 にある
 * （並び替えと共通のため）。 */

/* 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;
}