/*
 * WooCommerce のページ(カート・購入手続き・マイアカウント)をテーマに合わせる
 * 標準の紫・緑のボタンや色を、テーマの黒(--gz-ink)にそろえる。トークンは tokens.css
 */

/* ---------- ボタン(ブロック版のカート・購入手続き/従来版のボタン) ---------- */
.gzpage .wc-block-components-button:not(.is-link),
.gzpage .wc-block-cart__submit-button,
.gzpage .wc-block-components-checkout-place-order-button,
.woocommerce .gzpage a.button,
.woocommerce .gzpage button.button,
.woocommerce .gzpage input.button,
.woocommerce .gzpage a.button.alt,
.woocommerce .gzpage button.button.alt,
.gzpage .woocommerce a.button,
.gzpage .woocommerce button.button,
.gzpage .woocommerce button.button.alt,
.gzpage .woocommerce-Button{
  border: 1px solid var(--gz-ink);
  border-radius: 0;
  background: var(--gz-ink);
  color: var(--gz-cream);
  font-family: var(--gz-sans);
  font-weight: 400;
  letter-spacing: 0.12em;
  box-shadow: none;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}
.gzpage .wc-block-components-button:not(.is-link):hover,
.gzpage .wc-block-cart__submit-button:hover,
.gzpage .wc-block-components-checkout-place-order-button:hover,
.gzpage .woocommerce a.button:hover,
.gzpage .woocommerce button.button:hover,
.gzpage .woocommerce button.button.alt:hover,
.gzpage .woocommerce-Button:hover{
  border-color: var(--gz-green);
  background: var(--gz-green);
  color: var(--gz-cream);
}

/* 価格・リンクの色(標準の緑・紫を使わない) */
.gzpage .woocommerce-Price-amount,
.gzpage .price,
.gzpage .amount{ color: inherit; }
.gzpage .wc-block-components-button.is-link,
.gzpage .woocommerce a:not(.button){ color: var(--gz-ink); }

/* 入力欄の角を、テーマの四角い形に */
.gzpage .wc-block-components-text-input input,
.gzpage .wc-block-components-combobox .components-combobox-control input,
.gzpage .wc-blocks-components-select .wc-blocks-components-select__select,
.gzpage .wc-block-components-textarea,
.gzpage .woocommerce form .form-row input.input-text,
.gzpage .woocommerce form .form-row textarea{
  border-radius: 0;
}

/* お知らせ(カートに入れました 等)の色 */
.gzpage .woocommerce-message,
.gzpage .woocommerce-info{ border-top-color: var(--gz-ink); }
.gzpage .woocommerce-message::before,
.gzpage .woocommerce-info::before{ color: var(--gz-ink); }

/* ---------- マイアカウント ---------- */
.gzpage .woocommerce-MyAccount-navigation ul{
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--gz-line);
}
.gzpage .woocommerce-MyAccount-navigation li{ border-bottom: 1px solid var(--gz-line); }
.gzpage .woocommerce-MyAccount-navigation a{
  display: block;
  padding: 12px 0;
  font-size: 14px;
  color: var(--gz-ink-soft);
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
}
.gzpage .woocommerce-MyAccount-navigation .is-active a,
.gzpage .woocommerce-MyAccount-navigation a:hover{ color: var(--gz-ink); }

/* ---------- 購入手続きの備考欄の案内(js/checkout-note.js が差し込む) ---------- */
.gz-note-guide{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.9;
  color: var(--gz-ink-soft);
}

/* ---------- 購入手続き: 注文ボタンの直前の表示(js/checkout-info.js が差し込む) ---------- */
.gz-checkout-info{
  margin: 8px 0 20px;
  padding: 20px 0 0;
  border-top: 1px solid var(--gz-line);
  font-size: 13px;
  line-height: 1.9;
  color: var(--gz-ink);
}
.gz-checkout-info dl{ margin: 0; }
.gz-checkout-info dl > div{ display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 6px 0; }
.gz-checkout-info dt{ color: var(--gz-ink-soft); }
.gz-checkout-info dd{ margin: 0; }
.gz-checkout-info__age{ margin: 12px 0 0; font-size: 12px; color: var(--gz-ink-soft); }
.gz-checkout-info__legal{ margin: 8px 0 0; font-size: 12px; color: var(--gz-ink-soft); }
.gz-checkout-info__legal a{ color: var(--gz-ink); border-bottom: 1px solid currentColor; }
@media (max-width: 767px){
  .gz-checkout-info dl > div{ grid-template-columns: 1fr; gap: 0; padding: 6px 0 8px; }
}

/* ---------- 商品画像(ボトル画像は縦長のため、正方形の枠に収める。限定セットは正方形の画像をそのまま) ---------- */
.gzpage .wc-block-cart-item__image img,
.gzpage .wc-block-components-order-summary-item__image img{
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}