@charset "UTF-8";

/**
 * WooCommerce 標準CSSの上書き
 *
 * 標準CSSは紫系（#a46497）が基調のため、コーポレートサイトの
 * アクセントカラーに置き換える。
 */

/* ============================
* ボタン
* ========================= */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  padding: 0.7em 32px;
  border-radius: 0;
  background-color: var(--_lighter-color-gray);
  color: var(--_color-text);
  font-family: inherit;
  font-weight: 400;
  line-height: 1.4;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: var(--_light-color-gray);
  color: var(--_color-text);
}

/* 商品一覧の「カートに追加」には .alt が付かないため既定のグレーになる。
   トップページのブロック版と色が違ってしまうので、.alt と同じ扱いにする。
   価格未設定の商品に出る「続きを読む」は主要な操作ではないのでグレーのまま。 */
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.add_to_cart_button {
  background-color: var(--accent-color);
  color: var(--_color-white);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce a.button.add_to_cart_button:hover {
  background-color: var(--dark-accent-color);
  color: var(--_color-white);
}

.woocommerce a.button.alt.disabled,
.woocommerce button.button.alt.disabled {
  background-color: var(--_color-gray);
}

/* ============================
* ブロック版の主要ボタン
*
* カートの「購入手続きに進む」と購入手続きの「注文を確定」が濃いグレーに
* なるのは、WordPress コアのグローバルスタイルが
* :root :where(.wp-element-button, .wp-block-button__link) で #32373c を
* 当てているため。テーマの .wp-block-button__link の指定はクラスが違うので
* 届かない。
*
* 対象は contained（塗りつぶし＝主要な操作）だけにする。outlined と text の
* 変種は WooCommerce 側が詳細度の高い指定を持っており、そのまま残る。
* クラス名は描画後の DOM で確認した実際の値。
* ========================= */
.wc-block-components-button.contained {
  background-color: var(--accent-color);
  color: var(--_color-white);
  transition: filter var(--_global--transition-duration) var(--_global--transition-function-timing);
}

.wc-block-components-button.contained:hover {
  filter: brightness(90%);
}

/* ============================
* 価格
* ========================= */
.woocommerce-Price-amount {
  color: var(--accent-color);
  font-weight: 700;
}

.woocommerce del,
.woocommerce del .woocommerce-Price-amount {
  color: var(--_color-gray);
  font-weight: 400;
}

.woocommerce span.onsale {
  min-width: auto;
  min-height: auto;
  padding: 0.3em 0.9em;
  border-radius: 0;
  background-color: var(--sub-accent-color);
  color: var(--_color-white);
  font-size: var(--wp--preset--font-size--sm-xs);
  font-weight: 400;
  line-height: 1.4;
}

/* ============================
* 商品一覧（クラシックテンプレート）
*
* WooCommerce 標準はフロートで並べるため、同じ行のカードが互いの高さを
* 知らない。商品名の行数の差がそのまま価格とボタンの縦位置のずれになる。
* グリッドに置き換えると行内のカードが同じ高さになるので、画像・商品名・
* 価格を包むリンクを伸ばし、価格をその下端へ寄せて位置を揃える。
* テーマの CSS は WooCommerce 標準より後に読み込まれるため上書きできる。
* ========================= */
.woocommerce ul.products {
  display: grid;
  gap: var(--_margin1);
  margin: 0;
  padding: 0;
}

/* 標準CSSの clearfix 用の擬似要素は、グリッドでは空のセルになってしまう */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none;
}

.woocommerce ul.products.columns-1 {
  grid-template-columns: 1fr;
}

.woocommerce ul.products.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}

.woocommerce ul.products.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}

.woocommerce ul.products.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* 768px 以下は WooCommerce 標準と同じ 2 カラムに揃える */
@media (max-width: 768px) {
  .woocommerce ul.products[class*="columns-"] {
    grid-template-columns: repeat(2, 1fr);
  }
}

.woocommerce ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product {
  display: flex;
  flex-direction: column;
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}

/* 価格が未設定の商品でもリンクは伸びるため、ボタンの位置は揃う */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.woocommerce ul.products li.product .price {
  margin-top: auto;
}

/* ボタンは文字幅のまま左端に置く */
.woocommerce ul.products li.product .button {
  align-self: flex-start;
}

/* 2カラムのカード幅では「カートに追加」が折り返す。標準の左右余白 32px が
   カード幅に対して大きすぎるため、768px 以下では余白と文字を詰めたうえで
   カード幅いっぱいに広げる。タップ領域が広がる利点もある。 */
@media (max-width: 768px) {
  .woocommerce ul.products li.product .button {
    align-self: stretch;
    padding-inline: 0.6em;
    font-size: var(--wp--preset--font-size--sm-s);
    text-align: center;
  }
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding-top: 0.6em;
  font-size: var(--wp--preset--font-size--sm-m);
  font-weight: 400;
}

.woocommerce ul.products li.product a img {
  margin-bottom: 0.6em;
}

/* ============================
* 商品一覧（Product Collection ブロック）
*
* トップページの商品グリッドはクラシックテンプレートではなく
* woocommerce/product-collection ブロックで出力される。上のセレクタは
* 当たらないため、ブロック側のクラスに対して別途指定する。
* ========================= */

/* 商品名はブロックが h2 を出力するため、テーマの本文見出しスタイル
   （style.css の .c-entry__content h2）のグレー背景と金の左罫が乗ってしまう。
   商品名は見出しではないので打ち消す。

   ここの font-size は、ブロック側でサイズを指定していないときだけ効く。
   エディターでサイズを選ぶと has-medium-font-size のようなクラスが付き、
   WordPress が .has-medium-font-size { font-size: … !important } を
   出力するため、詳細度では勝てない。 */
.c-entry__content h2.wp-block-post-title {
  padding: 0;
  border-left: none;
  background-color: transparent;
  font-size: var(--wp--preset--font-size--sm-m);
}

/* グリッドなのでカードの高さ自体は揃うが、中身が上から積まれるため
   商品名の行数が違うと価格とボタンの縦位置がずれる。カードを縦の
   フレックスにして、価格から下をカードの下端へ寄せる。 */
.wc-block-product-template > .wc-block-product {
  display: flex;
  flex-direction: column;
}

.wc-block-product-template > .wc-block-product > .wp-block-woocommerce-product-price {
  margin-top: auto;
}

/* ============================
* カート・購入手続きの横幅
*
* この2画面は2カラムのブロックなので、テーマの本文幅 46rem では窮屈になる。
* 購入手続きの注文概要が約230pxまで潰れて商品名が4行に折り返していた。
* 幅の制約を外し、本文領域いっぱい（PC で 1222px）を使わせる。
*
* あわせて alignwide の負のマージンを打ち消す。ブロック側が alignwide を
* 持つため、テーマの全幅化の指定が効いて左右の余白が消え、
* スマートフォンでフォームが画面端に張り付いていた。
* ========================= */
.woocommerce-cart .c-entry__content.u-slim-width,
.woocommerce-checkout .c-entry__content.u-slim-width {
  max-width: none;
}

.woocommerce-cart .c-entry__content > .alignwide,
.woocommerce-checkout .c-entry__content > .alignwide {
  margin-inline: 0;
}

/* ============================
* カートの商品サムネイル
*
* WooCommerce の既定は列幅 80px から右余白 16px を引いた 64px。精肉なので
* 商品画像をもう少し見せる。画像は幅 100% なので、列幅を広げれば追従する。
*
* 列幅を決める場所がレイアウトごとに違う。カートブロックの幅が 700px 以上の
* 横並びでは <th> の幅、700px 未満の縦積みでは行の grid-template-columns の
* 1本目が効く。縦積みではヘッダー行が display: none になり、横並びでは
* テーブル表示のため grid-template-columns が無効になる。互いのレイアウトで
* 無害なので、メディアクエリを使わずに両方を指定できる。
*
* 縦積みは商品名の列を圧迫しないよう控えめにしている。
* 実際の表示幅は横並びで 112px、縦積みで 80px。
*
* 詳細度は WooCommerce 側（クラス3個・要素1個）より高くしている。
* ブロックのスタイルシートはテーマより後に読み込まれる場合があり、
* 記述順では勝てないため。
* ========================= */
.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__header-image {
  width: 128px;
}

.woocommerce-cart .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row {
  grid-template-columns: 96px 132px;
}

/* ============================
* マイページのナビ
*
* WooCommerce 標準は list-style を指定していないため、ブラウザ既定の
* 黒丸が付いたリンクの羅列になる。現在の項目も区別できない。
* 縦並びのメニューとして整え、現在の項目を金色の左罫で示す。
* ========================= */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link + .woocommerce-MyAccount-navigation-link {
  border-top: 1px solid var(--_lighter-color-gray);
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: 0.6em 0.9em;
  border-left: 2px solid transparent;
  text-decoration: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation-link a:hover {
  background-color: var(--_lightest-color-gray);
}

/* 罫線の太さは常に 2px。現在の項目だけ色を変えるので文字位置が動かない */
.woocommerce-account .woocommerce-MyAccount-navigation-link.is-active a {
  border-left-color: var(--accent-color);
  background-color: var(--_lightest-color-gray);
}

/* 768px 以下では WooCommerce がナビと内容を縦積みにするため、6項目の縦一列が
   ファーストビューを埋めてしまう。内容が下に切り替わることが伝わりにくいので
   2カラムに並べて高さを半分に抑え、内容との間隔も確保する。
   ul に背景色を敷き 1px の隙間を空けることで、罫線を引かずに格子を作る。 */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-MyAccount-navigation {
    margin-bottom: var(--_margin-1);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    border: 1px solid var(--_lighter-color-gray);
    background-color: var(--_lighter-color-gray);
  }

  .woocommerce-account .woocommerce-MyAccount-navigation-link {
    background-color: var(--_color-white);
  }

  /* 320px 幅でも「ダッシュボード」「アカウント詳細」が折り返さないよう左右を詰める */
  .woocommerce-account .woocommerce-MyAccount-navigation-link a {
    padding-inline: 0.6em;
  }

  /* 縦一列用の区切り線は不要。隙間が罫線の役割を果たす */
  .woocommerce-account .woocommerce-MyAccount-navigation-link + .woocommerce-MyAccount-navigation-link {
    border-top: none;
  }
}

/* ============================
* 通知
* ========================= */
.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--accent-color);
  background-color: var(--_lightest-color-gray);
  color: var(--_color-text);
}

.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--accent-color);
}

.woocommerce-error {
  border-top-color: var(--sub-accent-color);
  background-color: var(--_lightest-color-gray);
  color: var(--_color-text);
}

.woocommerce-error::before {
  color: var(--sub-accent-color);
}

/* ============================
* フォーム・テーブル
*
* コーポレートサイトの問い合わせフォームと同じく、入力欄は白地にする。
* ========================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  background-color: var(--_color-white);
}

.woocommerce form .form-row label {
  font-size: var(--wp--preset--font-size--sm-s);
}

.woocommerce table.shop_table {
  border-radius: 0;
}

.woocommerce table.shop_table th {
  font-weight: 400;
}

/* ============================
* タブ
*
* WooCommerce 標準のタブは、角丸と影で作った立体的な縁を明るい背景に載せる
* 前提の見た目。商品詳細ページはダークな本文にしているため平坦な形へ置き換え、
* 選択中のタブは金色の下線で示す。
* ========================= */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  padding-left: 0;
}

/* タブ列と本文を仕切る線 */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* タブは枠で囲み、選択中は下辺を背景色で塗って本文と地続きに見せる。
   下線だけでは「分かれたタブ」に見えず、既定で選択されている「説明」が
   単なる装飾に見えてしまうため。

   文字色は li 側に指定する。WooCommerce が li に color: #515151 を持っており、
   a を color: inherit にすると濃いグレーを受け継いで暗い背景で読めなくなる。

   single-product と woocommerce はどちらも body に付くため、セレクタは
   .single-product.woocommerce と続けて書く。間にスペースを入れると
   子孫の指定になり、同一要素なので一致しない。 */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li {
  margin: 0 0.3em 0 0;
  padding-inline: 1.2em;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--_global--border-radius) var(--_global--border-radius) 0 0;
  background-color: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
}

/* 角丸を影で描く標準の細工は使わない */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: inherit;
  font-weight: 400;
}

.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--_color-white);
}

/* 下辺を背景と同じ色で塗ると仕切り線が隠れ、本文と繋がって見える。
   上辺のアクセントは内側の影で描き、選択の前後で高さが変わらないようにする。 */
.single-product.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  border-bottom-color: var(--_footer-background-color);
  background-color: transparent;
  box-shadow: inset 0 2px 0 var(--accent-color);
  color: var(--_color-white);
}

/* 商品説明とレビューの本文幅。最大 1222px のままでは1行が長く読みづらいため、
   コーポレートサイトの本文と同じ 46rem に収める。タブ列の幅は変えない。 */
.single-product.woocommerce div.product .woocommerce-Tabs-panel {
  max-width: 46rem;
}

/* ============================
* レビューの星
* ========================= */
.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
  color: var(--accent-color);
}