/********************************************************
  KANJI TOKYO | WC+SWELL 統合スタイル（SPサイズ分岐版）
  2025-11-05
  置き場所：/wp-content/themes/swell_child/css/woo-cart-custom.css
********************************************************/

/* ========== 共通ユーティリティ（変数） ========== */
:root{
  /* 価格サイズ：PCの既定値。ここを変えれば全体に反映 */
  --madara-price-size: 28px;   /* 例：30px / 28px / 24px */
  --madara-price-line: 1.25;

  /* ボタン配色 */
  --madara-btn-bg: #333;
  --madara-btn-bg-hover: #C0C0C0;
  --madara-btn-fg: #fff;
}

/* SPだけサイズを抑える（任意のブレークポイントで調整） */
@media (max-width: 768px){
  :root{ --madara-price-size: 24px; }  /* ←SP用サイズ */
}

/* 在庫 0 の「Sold Out」 */
.out-of-stock{
  font-size: 1.2em;
  font-weight: 700;
  color: #a00;
}

/* ========== カートアイコン / バッジ ========== */
.menu-item-cart{
  position: relative;
  display: inline-flex;
  align-items: center;
}
.menu-item-cart .madara-cart-link{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  text-decoration: none;
  line-height: 1;
}
.madara-cart-icon-wrap{
  position: relative;
  display: inline-block;
  line-height: 1;
}
.madara-cart-fa,
.menu-item-cart .madara-cart-icon{
  font-size: 25px;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
}
.madara-cart-icon-wrap .madara-cart-badge{
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(35%, -35%);
  min-width: 1.1em;
  height: 1.1em;
  padding: 0 .26em;
  background: #000;
  color: #fff;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.1em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 0 0 2px #fff;
}
.madara-cart-badge[data-count="0"]{ display: none; }

.menu-item-cart .madara-cart-text{
  font-size: 12px;
  line-height: 1.2;
  margin-top: 2px;
  margin-left: 6px;
}
@media (max-width: 768px){
  .menu-item-cart .madara-cart-text{ display: none; }
}
@media (min-width: 769px){
  .menu-item-cart{ margin-left: auto; }
}

/********************************************************
  SPヘッダー：カートアイコンを右端に寄せる
  ・SWELL の .l-header__spNav / .p-spHeadMenu を上書き
********************************************************/
@media (max-width: 959px){

  /* SPヘッダーメニューを右寄せフレックスにする */
  .l-header__spNav .p-spHeadMenu{
    display: flex !important;
    justify-content: flex-end !important;
    text-align: right !important;
    padding-right: 8px; /* 余白はお好みで調整 */
  }

  /* 自動センタリング用の margin:auto を全て打ち消す */
  .l-header__spNav[data-loop="0"] .p-spHeadMenu .menu-item{
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0;
  }
}

/************************************************
  SPヘッダー：カートバッジ位置の微調整
  ・上にはみ出して切れないようにする
************************************************/
@media (max-width: 959px){
  .madara-cart-icon-wrap .madara-cart-badge{
    transform: translate(35%, -10%) !important;
  }
}

/* ========== WooCommerce ボタン ========== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce .added_to_cart,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.products .product .button,
.products .product .add_to_cart_button{
  background-color: var(--madara-btn-bg) !important;
  color: var(--madara-btn-fg) !important;
  border: 1px solid var(--madara-btn-bg) !important;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: .05em;
  text-align: center;
  padding: .6em 1.2em;
  transition: transform .25s ease, opacity .25s ease, background-color .25s ease, border-color .25s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce .added_to_cart:hover,
.products .product .button:hover,
.products .product .add_to_cart_button:hover{
  background-color: var(--madara-btn-bg-hover) !important;
  border-color: var(--madara-btn-bg-hover) !important;
  color: var(--madara-btn-fg) !important;
  transform: translateY(-2px);
  opacity: 1;
}

/* ========== 商品カード（JP/EN 共通） ========== */
/* レイアウト（何列に並べるか）は SWELL＋WooCommerce に任せる */
.woocommerce ul.products{
  /* display や flex / grid / width 系は書かない */
  /* 必要なら上下の余白だけ調整 */
  margin-top: 0;
  margin-bottom: 0;
}

/* 各商品の「カード風デザイン」だけを付ける */
.woocommerce ul.products li.product{
  text-align: center;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.05);
  overflow: hidden;
  padding: 16px;
  /* max-width: 300px; ← これが列数を強制していたので削除する */
  transition: transform .3s ease, box-shadow .3s ease;
}

.woocommerce ul.products li.product:hover{
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

.woocommerce ul.products li.product img{
  border-radius: 12px;
  margin-bottom: 10px;
  object-fit: cover;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 8px 0 6px;
  letter-spacing: .03em;
}


/* ========== 価格（最終勝ちオーバーライド） ========== */
/* 一覧（従来ループ／ショートコード） */
body .woocommerce ul.products li.product .price,
body .woocommerce ul.products li.product .price .amount,
body .products .product .price,
body .products .product .price .amount{
  font-size: var(--madara-price-size, 28px) !important;
  line-height: var(--madara-price-line, 1.25) !important;
  font-weight: 700 !important;
  color: #111 !important;
  margin: 8px 0 14px !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/* WooCommerce Blocks（wc-block-系） */
body .wc-block-grid__product-price,
body .wc-block-components-product-price{
  font-size: var(--madara-price-size, 28px) !important;
  line-height: var(--madara-price-line, 1.25) !important;
  font-weight: 700 !important;
  color: #111 !important;
}
/* 商品個別ページ */
body .woocommerce div.product p.price,
body .woocommerce div.product span.price,
body .woocommerce div.product .price .amount{
  font-size: var(--madara-price-size, 28px) !important;
  line-height: var(--madara-price-line, 1.25) !important;
  font-weight: 700 !important;
}
/* セール（ins/del） */
body .price ins .amount,
body .woocommerce-Price-amount.amount{
  font-size: var(--madara-price-size, 28px) !important;
  line-height: var(--madara-price-line, 1.25) !important;
  font-weight: 700 !important;
}
body .price del .amount{
  font-size: calc(var(--madara-price-size) * .65) !important;
  opacity: .7 !important;
}
/* 保険：言語別で隠れるケース */
html.lang-en .woocommerce ul.products li.product .price,
html.lang-ja .woocommerce ul.products li.product .price{
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}
/********************************************************
  SP決済ページ：金額フォントを少し小さくする
  （グローバル価格指定より後ろに書く）
********************************************************/
@media (max-width: 768px){

  /* 注文内容テーブル内の金額 */
  body.woocommerce-checkout .shop_table .woocommerce-Price-amount,
  body.woocommerce-checkout .shop_table .amount,
  body.woocommerce-checkout .shop_table tfoot td,
  body.woocommerce-checkout .shop_table tfoot th{
    font-size: 16px !important;   /* お好みで 14〜18px の間で調整 */
    line-height: 1.3 !important;
  }
}

/* WooCommerce 関連ページではロゴリンクを完全無効化（PC/SP 共通） */
/* woocommerce 系のクラスは body ではなく #body_wrap 側に付くため、こちらをターゲットにする */
#body_wrap[class*="woocommerce"] .c-headLogo__link {
  pointer-events: none !important;   /* 完全にクリック無効 */
  cursor: default !important;        /* カーソルも矢印に */
  opacity: 1 !important;             /* 見た目はそのまま */
}