/*
Theme Name: YITH Wonder Child
Description: Child theme of YITH Wonder with theme.json from YITH Wonder
Version: 0.1.0
Tags: full-site-editing
Template: yith-wonder
Text domain: yith-wonder-child
Author: <a href="https://yithemes.com/">YITH</a>
Author URI: 
License: GPL-2.0+
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* サイト全体 */

/* ──────────────────────────────────────────────
   iOS Safari 専用フォント上書き
   ────────────────────────────────────────────── */
@supports (-webkit-touch-callout: none) and (not (-moz-appearance: none)) {
  /* iOS でのみ成立する WebKit 独自プロパティを利用して判定。
     Android Chrome など他の WebKit 系は除外される。 */
  html,
  body {
    font-family: "Meiryo", "メイリオ", "Hiragino Kaku Gothic ProN",
                 "Hiragino Sans", "YuGothic", "Yu Gothic", sans-serif !important;
  }
}


/* ──────────────────────────────────────────────
   キャプチャバッジ非表示
   ────────────────────────────────────────────── */
.grecaptcha-badge { visibility: hidden; }

/* ──────────────────────────────────────────────
   左右インラインパディングを 8px に
────────────────────────────────────────────── */

#wp--skip-link--target,
.wp-block-woocommerce-related-products {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

.wp-block-columns.is-layout-flex.wp-container-core-columns-is-layout-f5a44f5b.wp-block-columns-is-layout-flex,
.wp-block-woocommerce-product-details {
  padding-inline-start: 8px !important;
  padding-inline-end:   8px !important;
}

/* ────────────────
   WooCommerce レビューリスト左余白リセット
   ──────────────── */

/* RTL 対応のモダン指定 ─ UA stylesheet の padding-inline-start:40px を上書き */
ul.wc-block-review-list,
ul.wc-block-components-review-list {
  padding-inline-start: 5px !important;  /* 左余白をゼロに */
  margin-block-start: 0;               /* 必要なら上マージンもリセット */
  margin-block-end:   0;               /* 必要なら下マージンもリセット */
}

/* 古いブラウザ向けフォールバック（LTR 固定） */
ul.wc-block-review-list,
ul.wc-block-components-review-list {
  padding-left: 5px !important;          /* 互換用 */
}


/* サイト全体ここまで */


/* お会計ページ */

/* ──────────────────────────── 
	Stripe保存カード用チェックボックスの潰れ対策
──────────────────────────── */
body.woocommerce-checkout input[type="checkbox"]#wc-stripe-new-payment-method{
	/*  □ が縦長につぶれないよう寸法を固定  */
	width:18px !important;
	height:18px !important;
	min-width:18px !important;
	min-height:18px !important;

	/* OS デフォルトのチェックボックスを表示 */
	appearance:auto !important;        /* Firefox / Edge / Chrome */
	-webkit-appearance:checkbox !important; /* Safari  */

	/* テキストとの間隔を確保（任意調整） */
	vertical-align:middle;
}

/* チェックボックスとテキストの間の余白を狭める */
input[type="checkbox"] {
	margin-right: 4px !important;
	vertical-align: middle;
}

/* ──────────────────────────────────
   モバイル専用：カート「購入手続きに進む」ボタン拡大
   ────────────────────────────────── */
@media (max-width: 768px) {
  /* ボタン本体 */
  .wc-block-cart__submit-button.contained {
    display: flex;               /* 中央寄せ用 */
    align-items: center;
    justify-content: center;
    min-height: 72px;            /* 高さをアップ */
    padding: 0 1.4rem;           /* 横余白は控えめ */
  }

  /* ボタン内テキスト */
  .wc-block-cart__submit-button.contained .wc-block-components-button__text {
    font-size: 1.45rem;          /* フォントサイズ拡大 */
    line-height: 1.2;            /* 行間を詰める */
  }
}

/* ───── WooCommerce チェックアウト（モバイル幅）用 ───── */
@media (max-width: 767px) {
  /* メインコンテンツ全体の左右パディングを縮小 */
  body.woocommerce-checkout .site-main,
  body.woocommerce-checkout .entry-content,
  body.woocommerce-checkout .woocommerce {
    padding-left: 8px !important;   /* お好みで数値を調整 */
    padding-right: 8px !important;
  }
}
/* ─────────────────────────────
   モバイル専用：チェックアウト #order_review 左余白調整
   ───────────────────────────── */
@media (max-width: 768px) {
  /* チェックアウトページに限定 */
  body.woocommerce-checkout #order_review {
    /* ① 変数を局所的に上書き（←ここがポイント） */
    --wp--preset--spacing--40: 0px !important;

    /* ② 念のためプロパティもゼロに固定 */
    padding-left: 0 !important;
    padding-inline-start: 0 !important; /* logical prop 対策 */
  }
}

/* ─────────────────────────────
   モバイル専用：利用規約と購入確定ボタン間に余白
   ───────────────────────────── */
@media (max-width: 768px) {
  .woocommerce-checkout label.woocommerce-form__label-for-checkbox {
	margin-bottom: 15px !important;
	display: block !important;
	}
}

/* お会計ページここまで */


/* 個別商品ページ */

/* ─────────────────────────────
   商品価格の￥マークだけを小さくする
   ───────────────────────────── */
.woocommerce-Price-currencySymbol,
.wc-block-components-price__currency-symbol {
  font-size: 0.7em !important;
  /* 文字位置を微調整する場合 
  vertical-align: top; 
  */
}

/* ----------------------------------------
   ドロップダウンメニュー横幅修正
---------------------------------------- */
form.variations_form table.variations select {
	max-width: 100% !important;
	width: 100%;
}
/* ----------------------------------------
   ドロップダウンメニュー立幅修正
---------------------------------------- */
body.product table.variations select {
	height: fit-content !important;
}

/* ----------------------------------------
   モバイル画面下部固定ボタン（横並び）
---------------------------------------- */

.sticky-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    background-color: #ffffff;
    border-top: 1px solid #ccc;
}

.sticky-bottom-bar button,
.sticky-bottom-bar a {
    flex: 1;
    text-align: center;
    font-size: 18px;
    padding: 15px 0;
    text-decoration: none;
    border: none;
}

.sticky-add-to-cart {
    background-color: #007565;
    color: #fff;
}

.sticky-contact {
    background-color: #f1f1f1;
    color: #333;
}

@media (min-width: 767px) {
    .sticky-bottom-bar {
        display: none;
    }
}

/* ----------------------------------------
   レビュー星色変更
---------------------------------------- */
.star-rating,
.star-rating span,
.wc-block-components-product-rating__stars,
.wc-block-components-product-rating__stars span,
.wc-block-components-product-rating__stars::before,
.wc-block-components-product-rating__stars span::before {
    color: #FFD700 !important;      /* 🟡ゴールド */
}

/* 任意 - 深さを出すために塗りつぶされていないレイヤーの不透明度を30%にする */
.wc-block-components-product-rating__stars::before {
    opacity: .3 !important;
}

/* ─────────────────────────────
   モバイル専用：商品説明タブ内 blockquote の左右マージン調整
   ───────────────────────────── */
@media (max-width: 767px) {
  /* 商品ページの説明タブに限定 */
  .single-product #tab-description blockquote {
    margin: 0 10px !important;       /* 上下 0、左右 10px */
  }
}


/* ─────────────────────────────
   モバイル専用：商品説明タブ内画像を全幅表示
   ───────────────────────────── */
@media (max-width: 767px) {
  .single-product #tab-description img {
    width: 100% !important;     /* 横幅をコンテンツ幅いっぱいに */
    max-width: 100% !important; /* インライン style の幅指定を無効化 */
    height: auto !important;    /* 縦横比を保持 */
    display: block;             /* 余白をなくすため inline → block */
    margin-left: 0 !important;  /* 不要な左右余白をリセット */
    margin-right: 0 !important;
	margin-bottom: 10px !important;
  }
}

/* ─────────────────────────────
   モバイル専用：商品説明タブ内テキスト基本サイズ調整
   ───────────────────────────── */
@media (max-width: 768px) {
  /* 商品ページ > 説明タブ全体にフォントサイズを設定 */
  .single-product #tab-description {
    font-size: 16px !important;   /* 基本文字サイズを 16px に */
    line-height: 1.6;             /* 文字間隔をゆとりある値に */
  }

  /* p・li など個別要素が独自サイズを持っている場合を上書き */
  .single-product #tab-description p,
  .single-product #tab-description li,
  .single-product #tab-description span,
  .single-product #tab-description div {
    font-size: inherit !important;   /* コンテナの 16px を継承 */
  }
}

/* ─────────────────────────────
   レビュータブ内のレビューリストの左余白を狭く
   ───────────────────────────── */
.woocommerce-Tabs-panel--reviews ol.commentlist {
  padding-inline-start: 8px !important;   /* 左余白を8pxに調整 */
  margin-inline-start: 0 !important;      /* 余計な外側マージンをリセット */
}

/* 個別商品ページここまで */


/* 商品一覧ページ */

/* ────────────────────────────────
   商品一覧ページ - モバイル版は２列表示
──────────────────────────────── */
@media (max-width: 600px) {
  /* 商品ループ全体を 2fr × 2fr の Grid に */
  .wp-block-post-template-is-layout-grid,
  ul.products.is-layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem;          /* 列間・行間の余白　お好みで */
  }

  /* 各商品ボックスの余白を微調整したい場合 */
  .wp-block-post-template-is-layout-grid li,
  ul.products.is-layout-grid li.product {
    margin: 0;          /* Wonder 標準のマージンを打ち消し */
  }
}

/* 商品一覧ページここまで */


/* 個別ページ */

/* ────────────────────────────────
   トップページ - タイトル非表示
──────────────────────────────── */

.page-id-27 .wp-block-post-title {
    display: none !important;
}

/* 個別ページここまで */

/* 記事一覧ページ */

@media (max-width: 600px) {
  .wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid.wp-block-post-template-is-layout-grid {
      grid-template-columns: 1fr !important;
  }
}

/* 記事一覧ページここまで */

/* 
WP Form 送信ボタンの色を変更
*/
.wpforms-form button[type=submit] {
    background-color: #007565 !important;
    /* border-color: #066AAB !important; */
	color: #fff !important;
    transition: background 0.3s ease-in-out;
}
 
.wpforms-form button[type=submit]:hover {
    background-color: #007565 !important;
}

#ez-toc-container {
    margin-top: 30px !important;
	margin-bottom: 30px !important;
}

/* 
YITH Cart Messages 横幅調整
*/
div.yith-cart-message {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 1200px;
}

@media (max-width: 1024px) {
    div.yith-cart-message {
        width: 90%;
    }
}

@media (max-width: 767px) {
    div.yith-cart-message {
        width: 90%;
    }
}