/* astra-woo-checkout.css — カート / チェックアウト / マイアカウントの意匠。
 *
 * Shopify の cart は Dawn 標準（背景だけ透明化）で、checkout は Shopify 側の
 * 固定 UI だった。つまり「再現すべき独自デザイン」は存在しない。
 * ここでの目的は、購入導線がサイトの他の部分と地続きに見えるようにすること。
 *
 * WooCommerce のクラシック（ショートコード）マークアップが対象。
 * ブロック版はテーマのテンプレート上書きが効かないため使っていない。
 */

:root {
  --astra-line: rgba(255, 255, 255, 0.15);
  --astra-line-strong: rgba(255, 255, 255, 0.3);
  --astra-cyan: #4ec3e1;
  --astra-field-bg: rgba(255, 255, 255, 0.04);
}

/* --- 全体の器 ---------------------------------------------------------- */

.woocommerce-cart .astra-wc-content,
.woocommerce-checkout .astra-wc-content,
.woocommerce-account .astra-wc-content {
  max-width: 1200px;
  margin-inline: auto;
  padding: 4rem 2rem 8rem;
  color: #fff;
  font-family: var(--astra-notosansjp), sans-serif;
  /* 安全策: これまで何度か数px単位の横はみ出しが再発したため（明細テーブル・
   * クーポン欄など要因はその都度潰しているが）、最後の保険として横スクロール
   * 自体を封じる。中の要素はどれも100%幅を前提にしているので、正当な内容が
   * 隠れる心配はない。 */
  overflow-x: hidden;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title,
.woocommerce-cart .astra-wc-content > h1,
.woocommerce-checkout .astra-wc-content > h1 {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-thin);
  font-size: 64px;
  text-align: center;
  color: var(--astra-gray);
  margin: 0 0 4rem;
}

@media screen and (max-width: 768px) {
  .woocommerce-cart .entry-title,
  .woocommerce-checkout .entry-title,
  .woocommerce-account .entry-title {
    font-size: 36px;
    margin-bottom: 2.4rem;
  }
}

/* --- 表組み（カート明細・注文内容） ------------------------------------ */

.woocommerce table.shop_table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  color: #fff;
  background: transparent;
}

.woocommerce table.shop_table th {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--astra-gray);
  text-align: left;
  padding: 1.2rem 1rem;
  border-bottom: 1px solid var(--astra-line-strong);
}

.woocommerce table.shop_table td {
  padding: 2rem 1rem;
  border-bottom: 1px solid var(--astra-line);
  vertical-align: middle;
  background: transparent;
}

.woocommerce table.shop_table .product-thumbnail img {
  width: 90px;
  height: auto;
  border-radius: 2px;
}

.woocommerce table.shop_table .product-name a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
}

.woocommerce table.shop_table .product-name a:hover {
  color: var(--astra-cyan);
}

.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal,
.woocommerce table.shop_table .amount {
  font-family: var(--astra-source-code-pro), monospace;
  color: #fff;
}

.woocommerce table.shop_table td.product-remove a.remove {
  color: var(--astra-gray) !important;
  font-size: 20px;
  line-height: 1;
  background: transparent !important;
}

.woocommerce table.shop_table td.product-remove a.remove:hover {
  color: var(--astra-cyan) !important;
}

/* 数量入力。
 * Dawn は .quantity::before で背景を塗るため、入力欄自体は透過にして
 * 枠いっぱいに広げる。以前は入力が枠の半分ほどしか伸びておらず、
 * 背景もまっ黒の塗りつぶしになっていた。 */
/* 枠の形は商品ページと同じ（丸いピル）。同じ操作なのに画面ごとに見た目が
 * 違うと迷うため。−/＋ ボタンは inc/woocommerce.php が入れている。 */
.woocommerce .quantity {
  display: inline-flex;
  align-items: center;
  width: 14.2rem;
  height: 48px;
  max-width: 100%;
  border: 1px solid var(--astra-line-strong);
  border-radius: 9999px;
  overflow: hidden;
}

/* 数量を変えられない商品（スターターキットは1個まで）は、WooCommerce が
 * 入力欄ではなく数字だけを出す。その数字を他の文字と揃える。 */
.woocommerce td.product-quantity {
  color: #CBCBCB;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 16px;
}

.woocommerce .quantity::before {
  background-color: rgba(255, 255, 255, 0.06);
}

.woocommerce .quantity input.qty {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0.8rem;
  background: transparent;
  border: 0;
  color: #fff;
  text-align: center;
  font-family: var(--astra-source-code-pro), monospace;
  appearance: textfield;
  -moz-appearance: textfield;
}

.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* クーポン欄を開くとチェックアウトのグリッドが 67px まで潰れていた。
 * astra-woo.css が .woocommerce の clearfix 擬似要素を無効にしているため
 * クーポン周りのフロートが内包されず、後続のグリッドが押し潰されていた。
 * グリッド側でフロートを解除する。 */
.woocommerce-checkout .woocommerce > form.checkout {
  clear: both;
}

/* --- カートの下部（クーポン・更新・合計） ------------------------------ */

.woocommerce .cart .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 2.4rem;
}

/* クーポン欄。入力とボタンを同じ高さの丸いピルにして、商品ページの
 * 数量やバリエーション選択と同じ形に揃える。 */
.woocommerce .cart .actions .coupon {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1 1 auto;
  max-width: 46rem;
}

/* WooCommerce 本体が
 * `.woocommerce-cart table.cart td.actions .coupon .input-text`（クラス4つ・要素2つ）
 * で float と細かい padding を当ててくる。こちらも同じ形で書いて上書きする。
 * 文字は中央に置く（入力欄というより、押せる場所として見せたいため）。 */
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce-checkout table.cart td.actions .coupon .input-text {
  float: none;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 48px;
  margin: 0;
  padding: 0 2.4rem;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
  color: #fff;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
  transition: border-color 0.2s ease;
}

.woocommerce-cart table.cart td.actions .coupon .input-text::placeholder,
.woocommerce-checkout table.cart td.actions .coupon .input-text::placeholder {
  color: #8C8C8C;
}

.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.woocommerce-checkout table.cart td.actions .coupon .input-text:focus {
  outline: none;
  border-color: #4EC3E1;
}

/* ボタンの色と丸みは astra-woo.css の副次ボタンの指定が当たる。
 * ここでは入力欄と高さを合わせ、文字を折り返さないようにするだけ。 */
.woocommerce .cart .actions .coupon button.button {
  flex: 0 0 auto;
  height: 48px;
  padding: 0 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
}

/* クーポン欄がSPで横に溢れる問題。
 * 入力欄（flex:1、両側2.4rem paddingで最低幅を持つ）とボタン
 * （flex-shrink:0＋white-space:nowrapで縮まない）を1行に並べたままだと、
 * 幅の狭い画面では2つの最低幅の合計がコンテナ幅を超える。
 * 縦積みにして、それぞれ横いっぱいに広げる。 */
@media screen and (max-width: 480px) {
  .woocommerce .cart .actions .coupon {
    flex-wrap: wrap;
  }

  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .woocommerce-checkout table.cart td.actions .coupon .input-text,
  .woocommerce .cart .actions .coupon button.button {
    flex: 1 1 100%;
  }
}

.woocommerce .cart_totals {
  margin-top: 4rem;
  margin-left: auto;
  max-width: 46rem;
}

.woocommerce .cart_totals h2 {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--astra-gray);
  margin-bottom: 1.6rem;
}

.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  padding: 1.4rem 0;
  text-transform: none;
  font-size: 14px;
}

.woocommerce .cart_totals .order-total th,
.woocommerce .cart_totals .order-total td {
  border-bottom: 0;
  border-top: 1px solid var(--astra-line-strong);
  font-size: 18px;
  color: #fff;
}

.woocommerce .wc-proceed-to-checkout {
  padding-top: 2rem;
}

.woocommerce .wc-proceed-to-checkout .checkout-button {
  display: block;
  width: 100%;
  text-align: center;
}

/* 空のカート */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message {
  text-align: center;
  font-size: 20px;
  color: var(--astra-gray);
  padding-block: 6rem 2rem;
}

.woocommerce .return-to-shop {
  text-align: center;
  padding-bottom: 8rem;
}

/* --- チェックアウト ---------------------------------------------------- */

.woocommerce-checkout .woocommerce > form.checkout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* PC/SP共通の余白バグの本体。
 * form.checkout の直接の子は customer_details / order_review_heading /
 * order_review の3つだけではなく、WooCommerceが出す
 * <wc-order-attribution-inputs>（隠しinputしか持たない空のカスタム要素）が
 * customer_details の直後・order_review_heading の直前にもう1個ある
 * （実際のHTMLで確認済み）。display:grid のグリッド子要素は display の
 * 既定値（未知のカスタム要素は inline）では auto-placement 対象から外れず、
 * 列指定の無いこの要素が auto-placement で customer_details と同じ行の
 * 2列目（order_review_heading の本来の位置）に入ってしまい、
 * customer_details の高さぶんだけ order_review 側に空白ができる
 * （PCで発生。実機で確認済み）。
 * 中身は隠しinputだけで見た目は不要なので display:none にしてグリッドの
 * 配置対象から外す。 */
.woocommerce-checkout form.checkout > wc-order-attribution-inputs {
  display: none;
}

/* SPで「ご注文」見出しと明細表の間に大きな空白ができる問題（上と同根）。
 * 900px以下でも display:grid のまま grid-column:1 を当てるだけだと、
 * 上のカスタム要素を非表示にしてもなお auto-placement の行の数え方に
 * 依存してしまう。グリッドのまま列だけ潰すのではなく、この幅からは
 * display:block に戻して普通の縦積みにする（auto-placementの余地自体を
 * 無くす）。 */
@media screen and (max-width: 900px) {
  .woocommerce-checkout .woocommerce > form.checkout {
    display: block;
  }

  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review_heading {
    margin-bottom: 3rem;
  }
}

.woocommerce-checkout #customer_details {
  grid-column: 1;
}

.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
  grid-column: 2;
}

.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading {
  font-family: var(--astra-roboto), sans-serif;
  font-weight: var(--astra-font-weight-medium);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--astra-gray);
  margin: 0 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--astra-line);
}

/* フォーム項目（Dawn の .field に寄せる） */
.woocommerce form .form-row {
  padding: 0;
  margin-bottom: 1.6rem;
}

.woocommerce form .form-row label {
  display: block;
  font-size: 13px;
  color: var(--astra-gray);
  margin-bottom: 0.6rem;
}

.woocommerce form .form-row .required {
  color: var(--astra-cyan);
  text-decoration: none;
}

/* textarea は WooCommerce 側が .woocommerce form .form-row .input-text（0,3,0）で
 * 白背景を当ててくるため、こちらも .input-text を含めて specificity を並べる。
 * 含めないと注文メモだけ白地に黒文字のまま残る。 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%;
  padding: 1.2rem;
  background: var(--astra-field-bg);
  border: 1px solid var(--astra-line-strong);
  /* ボタンはピルだが、入力欄は文字が長いので控えめな丸みにする。 */
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  height: auto;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: none;
  border-color: var(--astra-cyan);
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

/* select2（国・都道府県）を暗い配色へ */
.woocommerce .select2-container .select2-selection--single .select2-selection__rendered {
  color: #fff;
  line-height: 1.4;
  padding: 0;
}

.woocommerce .select2-dropdown {
  background: #111;
  border-color: var(--astra-line-strong);
  color: #fff;
}

.woocommerce .select2-container .select2-results__option--highlighted[aria-selected] {
  background: var(--astra-cyan);
  color: #000;
}

/* 注文内容 */
.woocommerce-checkout #order_review {
  border: 1px solid var(--astra-line);
  padding: 2.4rem;
}

.woocommerce-checkout #order_review table.shop_table td,
.woocommerce-checkout #order_review table.shop_table th {
  padding: 1.2rem 0;
}

/* 支払い方法 */
.woocommerce-checkout #payment {
  background: transparent;
  border-radius: 0;
  margin-top: 2rem;
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--astra-line);
  padding: 0 0 1.6rem;
  margin: 0 0 1.6rem;
  list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
  margin-bottom: 1rem;
}

.woocommerce-checkout #payment ul.payment_methods label {
  color: #fff;
  font-size: 15px;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--astra-field-bg);
  color: var(--astra-gray);
  font-size: 13px;
  border-radius: 0;
  margin-top: 0.8rem;
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--astra-field-bg);
}

.woocommerce-checkout #payment .place-order {
  padding: 0;
}

.woocommerce-checkout #place_order {
  width: 100%;
}

/* --- 注文完了（サンキュー） -------------------------------------------- */

.woocommerce .woocommerce-thankyou-order-received {
  text-align: center;
  font-size: 22px;
  color: #fff;
  padding-block: 2rem 3rem;
}

.woocommerce ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  list-style: none;
  margin: 0 0 4rem;
  padding: 2rem 0;
  border-block: 1px solid var(--astra-line);
}

.woocommerce ul.woocommerce-order-overview li {
  border: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--astra-gray);
  text-align: center;
}

.woocommerce ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 0.6rem;
  font-size: 16px;
  text-transform: none;
  letter-spacing: 0;
  color: #fff;
}

/* --- マイアカウント ---------------------------------------------------- */

.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 22rem 1fr;
  gap: 4rem;
  align-items: start;
}

@media screen and (max-width: 900px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ログインフォームは1カラムで中央に置く */
.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
  max-width: 48rem;
  margin-inline: auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--astra-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--astra-line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 1.2rem 0.4rem;
  color: var(--astra-gray);
  text-decoration: none;
  font-size: 14px;
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  color: var(--astra-cyan);
}

.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
  border: 1px solid var(--astra-line);
  border-radius: 16px;
  padding: 3.2rem;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register button {
  width: 100%;
  margin-top: 1.6rem;
  height: 52px;
}

/* --- メール配信の同意 ------------------------------------------------------
 * 会員登録とアカウント設定の両方で同じ見た目にする。 */
.astra-newsletter-row {
  margin-top: 1.6rem;
}

.astra-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: #CBCBCB;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
  line-height: 1.6;
}

/* WooCommerce は checkbox を form-row の外に押し出す指定を持つので、戻す。 */
.astra-checkbox input[type='checkbox'] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #4EC3E1;
}

.astra-newsletter-note {
  display: block;
  margin-top: 6px;
  color: #6B6B6B;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 12px;
}

.astra-account-fieldset {
  margin-top: 2.4rem;
  padding: 2rem 2.4rem;
  border: 1px solid var(--astra-line);
  border-radius: 16px;
}

.astra-account-fieldset legend {
  padding: 0 0.8rem;
  color: var(--astra-gray);
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 14px;
  letter-spacing: 0.04em;
}

/* --- 購入完了画面のアカウント案内 -----------------------------------------
 * 買った直後は会員化の動機がいちばん高い。注文内容の下に、目に入る形で置く。 */
.astra-account-cta {
  margin-top: 4rem;
  padding: 3.2rem;
  border: 1px solid var(--astra-line);
  border-radius: 16px;
}

.astra-account-cta h2 {
  margin: 0 0 1.2rem;
  color: #fff;
  font-family: var(--astra-source-code-pro), monospace;
  font-size: 18px;
  letter-spacing: 0.04em;
}

.astra-account-cta p {
  margin: 0 0 1.6rem;
  color: #CBCBCB;
  font-family: var(--astra-notosansjp), sans-serif;
  font-size: 14px;
  line-height: 1.8;
}

.astra-account-cta .astra-newsletter-note {
  margin-top: 1.2rem;
}

.astra-account-cta__form .button {
  width: 100%;
  max-width: 36rem;
  height: 52px;
  margin-top: 1.6rem;
}