/* =========================================================
  WooCommerce Styles (Scoped)
  - Astra + WooCommerce 前提
  - “WooCommerceページ内だけ”に効かせる（事故防止）
  - ページ別にブロック分け
========================================================= */

/* =========================================================
  00. Variables (色・角丸・影など)
========================================================= */
:root{
  --wc-card-bg: #fff;
  --wc-card-radius: 16px;
  --wc-card-shadow: 0 10px 30px rgba(0,0,0,.08);
  --wc-border: 1px solid rgba(0,0,0,.08);

  --wc-text: #222;
  --wc-muted: rgba(0,0,0,.65);

  --wc-gap: 12px;
  --wc-pad: 16px;

  /* ボタン系（今のサイトに合わせて調整OK） */
  --wc-btn-radius: 999px;
  --wc-btn-font-weight: 800;
}

/* =========================================================
  01. Common (WooCommerce全体共通)
========================================================= */
body.woocommerce,
body.woocommerce-page{
  color: var(--wc-text);
}

body.woocommerce a,
body.woocommerce-page a{
  text-decoration: none;
}

/* 見出しやテキストの読みやすさ */
body.woocommerce .woocommerce-message,
body.woocommerce .woocommerce-info,
body.woocommerce .woocommerce-error{
  border-radius: 12px;
}

/* 画像の角丸 */
body.woocommerce img{
  border-radius: 12px;
}

/* ボタン共通（Woo標準ボタンを今っぽく） */
body.woocommerce a.button,
body.woocommerce button.button,
body.woocommerce input.button,
body.woocommerce #respond input#submit{
  border-radius: var(--wc-btn-radius);
  font-weight: var(--wc-btn-font-weight);
}

/* =========================================================
  02. Product Archive / Shop (一覧ページ)
  - body.woocommerce.archive / post-type-archive-product 等に効く
========================================================= */
body.woocommerce.archive ul.products li.product,
body.post-type-archive-product ul.products li.product,
body.tax-product_cat ul.products li.product{
  background: var(--wc-card-bg);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-card-shadow);
  border: var(--wc-border);
  padding: 12px;
  overflow: hidden;
}

body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title,
body.post-type-archive-product ul.products li.product .woocommerce-loop-product__title{
  font-weight: 800;
  font-size: 1.02rem;
  margin: 8px 0 6px;
}

body.woocommerce.archive ul.products li.product .price,
body.post-type-archive-product ul.products li.product .price{
  color: var(--wc-muted);
  font-weight: 700;
}

/* “カートに追加”などのボタンを統一 */
body.woocommerce.archive ul.products li.product a.button,
body.post-type-archive-product ul.products li.product a.button{
  width: 100%;
  text-align: center;
  padding: 12px 10px;
  margin-top: 10px;
  border-radius: var(--wc-btn-radius);
}

/* =========================================================
  03. Single Product (商品詳細ページ)
  - body.single-product に限定
========================================================= */

/* WooCommerceズーム用の巨大画像を非表示（見た目崩れ対策） */
body.single-product .woocommerce-product-gallery img.zoomImg{
  display: none !important;
}
/* ズームカーソルも消す（雰囲気をシンプルに） */
body.single-product .woocommerce-product-gallery__image{
  cursor: default !important;
}
.woocommerce-product-gallery__trigger{
  display: none !important;
}

/* 画像枠（ギャラリー）を整える */
body.single-product .woocommerce-product-gallery{
  max-width: 400px;     /* 好みで */
  margin: 0 auto 16px;
}

/* 画像の外枠をカードっぽく */
body.single-product .woocommerce-product-gallery__wrapper,
body.single-product .woocommerce-product-gallery__image{
  border-radius: 16px;
  overflow: hidden;
  background: #f7f8fa;
}

/* メイン画像を“収める”表示（はみ出さない） */
body.single-product .woocommerce-product-gallery__image img.wp-post-image{
  width: 100% !important;
  height: auto !important;
  max-height: 420px;      /* 好みで */
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

@media (max-width: 544px){
  body.single-product .woocommerce-product-gallery__image img.wp-post-image{
    max-height: 300px;
  }
}


/* 右側 summary をカード化（画像とのバランスが良くなる） */
body.single-product .summary.entry-summary{
  background: var(--wc-card-bg);
  border: var(--wc-border);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-card-shadow);
  padding: var(--wc-pad);
}

/* タイトル */
body.single-product .summary .product_title{
  font-weight: 900;
  margin-bottom: 10px;
}

/* 価格（pt 表示） */
body.single-product .summary .price{
  font-weight: 900;
  color: var(--wc-text);
  margin-bottom: 12px;
}

/* 購入フォームを整える：数量＋購入ボタン */
body.single-product .summary form.cart{
  display: flex;
  gap: var(--wc-gap);
  align-items: center;
  flex-wrap: wrap; /* スマホで折り返し */
  margin-top: 14px;
}

/* 数量エリア（Astra/テーマ差があるので “quantity” をカード化） */
body.single-product .summary form.cart .quantity{
  display: flex;
  align-items: center;
  padding: 0px 0px;
}

/* 数量 input */
body.single-product .summary form.cart .quantity input.qty{
  width: 35px;
  text-align: center;
  border: 0;
  background: transparent;
  font-weight: 800;
  color: var(--wc-text);
}

/* 購入ボタンを主役に */
body.single-product .summary form.cart button.single_add_to_cart_button{
  flex: 1;
  min-width: 220px;
  padding: 14px 16px;
  border-radius: var(--wc-btn-radius);
  font-weight: 900;
  letter-spacing: .03em;
  box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

/* Stripe Express(リンク等) をカード内に馴染ませる */
body.single-product .summary #wc-stripe-express-checkout-element{
  margin-top: 12px !important;
}

/* 関連商品/アップセルもカード感を寄せる（すでに調整済みなら不要） */
body.single-product .related.products,
body.single-product .up-sells{
  margin-top: 26px;
}

/* =========================================================
  04. Cart (カートページ)
  - body.woocommerce-cart に限定
========================================================= */
body.woocommerce-cart .woocommerce-cart-form__contents{
  border: none !important;
}

/* 行（商品）をカード化：テーブル表示崩れを避けつつ安全に */
body.woocommerce-cart .woocommerce-cart-form__contents tr.cart_item{
  background: var(--wc-card-bg);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-card-shadow);
  border: var(--wc-border);
}

/* 画像の角丸 */
body.woocommerce-cart .product-thumbnail img{
  border-radius: 12px;
}

/* カートの “更新” “クーポン” などボタン */
body.woocommerce-cart .actions .button{
  border-radius: var(--wc-btn-radius);
  padding: 12px 14px;
}

/* 合計（カート合計）側をカード化 */
body.woocommerce-cart .cart-collaterals .cart_totals{
  background: var(--wc-card-bg);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-card-shadow);
  border: var(--wc-border);
  padding: var(--wc-pad);
}

/* =========================================================
  05. Checkout (購入手続き)
  - body.woocommerce-checkout に限定
========================================================= */
body.woocommerce-checkout form.checkout{
  background: var(--wc-card-bg);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-card-shadow);
  border: var(--wc-border);
  padding: var(--wc-pad);
}

/* 入力欄の角丸 */
body.woocommerce-checkout input.input-text,
body.woocommerce-checkout textarea{
  border-radius: 12px;
}

/* 注文ボタン */
body.woocommerce-checkout #place_order{
  border-radius: var(--wc-btn-radius);
  padding: 14px 16px;
  font-weight: 900;
}

/* =========================================================
  06. My Account (マイアカウント)
  - body.woocommerce-account に限定
========================================================= */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content{
  background: var(--wc-card-bg);
  border-radius: var(--wc-card-radius);
  box-shadow: var(--wc-card-shadow);
  border: var(--wc-border);
  padding: var(--wc-pad);
}

/* =========================================================
  99. Utilities (必要になった時にだけ使う)
========================================================= */
/* パンくず非表示したい場合（Astraのパンくずは別クラスのことも多い） */
/*
body.woocommerce .woocommerce-breadcrumb{
  display:none !important;
}
*/


/* タイトル＋価格を横並びにする */
/* タイトル */
body.single-product h1.product_title.entry-title{
  font-size: 1.6rem !important;
  margin: 0 !important;
  display: inline-block;     /* 価格と同じ行に乗せる */
  vertical-align: baseline;
}

/* 価格 */
body.single-product .summary.entry-summary > p.price{
  display: inline-block;     /* タイトルの横へ */
  margin: 0 0 0 14px !important; /* ← 横の間隔（お好みで） */
  white-space: nowrap;
  font-weight: 800;
  vertical-align: bottom;
}

/* タイトル＋価格の次の要素（フォーム等）を改行させる */
body.single-product .summary.entry-summary > form.cart{
  display: block;
  margin-top: 14px;
}


body.single-product h1.product_title.entry-title{
  font-size: 1.6rem !important;
}