/******** 1) pixiv ショートコードボタン ********/
.pixiv-shortcode-link{
  display:inline-flex; align-items:center; gap:.5em;
  padding:8px 15px; border-radius:5px;
  background:#0096fa; color:#fff !important;
  text-decoration:none !important; font-weight:700;
  transition:background-color .3s;
}
.pixiv-shortcode-link:hover{ background:#007bc5; color:#fff !important; }
.pixiv-shortcode-link i{ font-size:1.2em; }

/******** 2) 旧：インライン版フィルタは完全に非表示 ********/
.woocommerce .shaka-fe-inline-filter{
  display:none !important;
  margin:0 !important; padding:0 !important; height:0 !important;
  border:0 !important; overflow:hidden !important;
}

/******** 3) レイアウト：左=商品 / 右=フィルタ（等高化） ********/
@media (min-width:961px){
  .shop-grid{
    display:grid;
    grid-template-columns: 1fr 320px;
    gap: clamp(16px, 2vw, 28px);
    align-items: stretch;            /* ★ 等高化の要：start→stretch */
  }
  .shop-grid__main,
  .shop-grid__aside{
    align-self: stretch;             /* ★ 念のため子側でもstretch */
    min-width:0;
  }
}

/* 右カラムそのものを白いパネルにする（これで左と等高） */
.shop-grid__aside{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
  /* 高さ指定は不要。Gridが左列に合わせてくれる */
}

/* 中身だけをstickyにしたい場合はこのラッパーを使う（任意） */
.shop-grid__aside .filter-sticky{
  /* position: sticky; top: 90px; */ /* 使うならコメント解除 */
  display:flex; flex-direction:column; gap:1rem;
}

/* カード風（中身の見た目） */
.shop-grid__aside .widget,
.shop-grid__aside .filter-card{
  background:#fff;
  border:1px solid #e5e5e5;
  border-radius:10px;
  padding:.9rem 1rem;
  margin:0 0 1rem;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

/* 見出し */
.shop-grid__aside .shaka-fe-title{
  margin:.25rem 0 .5rem;
  font-size:15px; font-weight:700; color:#0a4c8a;
}
.shop-grid__aside .is-red .shaka-fe-title{ color:#991b1b; }

/* ピル（共通） */
.shop-grid__aside .shaka-chip{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.35em .7em; border-radius:9999px;
  text-decoration:none; border:1px solid透明;
  margin:0 .35rem .35rem 0; font-size:13px; line-height:1.1;
}

/* —— 青トーン —— */
.shop-grid__aside .is-blue .shaka-chip{
  background:#eaf4ff; color:#0a4c8a; border-color:#b6dbff;
}
.shop-grid__aside .is-blue .shaka-chip:hover{ background:#d9ecff; }
.shop-grid__aside .is-blue .shaka-chip.is-active{
  background:#2563eb; color:#fff; border-color:#2563eb;
}

/* —— 赤トーン —— */
.shop-grid__aside .is-red .shaka-chip{
  background:#fee2e2; color:#991b1b; border-color:#fecaca;
}
.shop-grid__aside .is-red .shaka-chip:hover{ background:#fecaca; }
.shop-grid__aside .is-red .shaka-chip.is-active{
  background:#dc2626; color:#fff; border-color:#dc2626;
}

/******** 4) モバイルは縦積み ********/
@media (max-width:960px){
  .shop-grid{ display:block; }
  .shop-grid__aside{ margin-top:1rem; }
}
/* ==== Equal-Height TEMP FIX (put at the very end) ==== */

/* 1) Gridは必ず等高に（別名クラスもカバー） */
.shop-grid,
.poteto-shop-grid { align-items: stretch !important; }

.shop-grid__main, .shop-grid__aside,
.poteto-shop-grid__main, .poteto-shop-grid__aside {
  align-self: stretch !important;
  min-width: 0;
}

/* 2) 右カラムそのものを白いパネル化（背景はaside本体へ） */
.shop-grid__aside,
.poteto-shop-grid__aside {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
  /* 高さ指定はしない：Gridが左列の高さに合わせます */
}

/* 3) 中身のみsticky（枠はstickyにしない） */
.shop-grid__aside .filter-sticky,
.poteto-shop-grid__aside .filter-sticky {
  position: sticky;
  top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  will-change: transform; /* stickyの安定化（Safari対策） */
}

/* 4) 子ラッパーの高さ指定は無効化（100%が効かない原因を除去） */
.shop-grid__aside .filter-frame,
.poteto-shop-grid__aside .filter-frame {
  height: auto !important;
  min-height: 0 !important;
}

/* 5) sticky殺しのoverflow/transformを祖先で無効化（よくある原因） */
.site-content, .content-area, .content, .woocommerce,
.ast-container, .wp-site-blocks {
  overflow-y: visible !important;
  transform: none !important;
}

/* 6) 横スクロール抑止はbodyに寄せる（Safariのsticky揺れ回避） */
html { max-width: 100%; }
body { overflow-x: hidden !important; }
/* === 商品カードの高さを揃え、ボタンを下端固定 === */

/* 1) 各カードを縦フレックスにする */
.woocommerce ul.products li.product{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 2) サマリーを伸縮領域にして、内部のボタンを底へ押し下げる */
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;  /* ← ここが伸びる */
}

/* 3) 「カゴに追加」(バリエーション含む) を底に吸着 */
.woocommerce ul.products li.product .astra-shop-summary-wrap .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .add_to_cart_button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .product_type_simple{
  margin-top: auto;             /* ← これで下に張り付く */
  align-self: stretch;          /* 横いっぱい（任意） */
}

/* 4) 画像ブロックは高さ自動（伸びない） */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  flex: 0 0 auto;
}

/* 5) グリッド側は“カードを伸ばす” */
.woocommerce ul.products{
  align-items: stretch;         /* テーマが flex/grid どちらでも有効 */
}
:root{ --shop-card-bottom-gap: 8px; }  /* 好みで 8〜20px くらい */

.woocommerce ul.products li.product{
  display:flex;
  flex-direction:column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding-bottom: var(--shop-card-bottom-gap) !important; /* ← ここを追加 */
}

.woocommerce ul.products li.product .astra-shop-summary-wrap .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .add_to_cart_button{
  margin-top:auto;  /* 底へ押し下げたまま */
  /* margin-bottom は不要 */
}
/* ページネーションの見た目と配置（中央寄せ） */
.poteto-pagination{
  grid-column: 1 / -1;        /* グリッドでも崩れない保険 */
  margin-top: 20px;
}

.poteto-pagination .woocommerce-pagination{
  display: flex;
  justify-content: center;
  gap: 6px;
}

.poteto-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  text-decoration: none;
  line-height: 1;
  background: #fff;
}

.poteto-pagination .page-numbers.current{
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  font-weight: 700;
}

.poteto-pagination .page-numbers:hover{
  border-color: #cfd5df;
  background: #f8fafc;
}

/* Wooページネーションを強制表示＋中央寄せ */
.woocommerce nav.woocommerce-pagination{
  display:block !important;
  margin-top:20px;
}
.woocommerce nav.woocommerce-pagination ul{
  display:flex !important;
  justify-content:center;
  gap:6px;
}
.woocommerce nav.woocommerce-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:36px; padding:0 10px;
  border:1px solid #e5e7eb; border-radius:8px;
  background:#fff; line-height:1; text-decoration:none;
}
.woocommerce nav.woocommerce-pagination .page-numbers.current{
  background:#2563eb; color:#fff; border-color:#2563eb; font-weight:700;
}
.woocommerce nav.woocommerce-pagination .page-numbers:hover{
  border-color:#cfd5df; background:#f8fafc;
}

/* Jetpack IS が残渣で li を display:none にしている場合の保険 */
.infinite-wrap, .infinite-loader{ display:none !important; }

/* === カゴボタンを“底から”固定オフセットで上げる === */
:root{
  --cart-lift: 12px;               /* ← ここを好きなpxに（例: 6 / 10 / 16） */
}

/* 等高は維持：サマリー領域を伸ばし、ボタンは下寄せのまま */
.woocommerce ul.products li.product{
  display:flex; flex-direction:column;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding-bottom: 0 !important; /* 底余白はゼロにして制御を統一 */
}

/* ボタンを“下寄せ + 底から --cart-lift 分だけ浮かせる” */
.woocommerce ul.products li.product .astra-shop-summary-wrap .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .add_to_cart_button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .product_type_simple,
.woocommerce ul.products li.product .astra-shop-summary-wrap .product_type_variable{
  margin-top:auto !important;                 /* 下寄せ */
  margin-bottom: var(--cart-lift) !important; /* 底から◯px上げる */
  align-self: stretch;
}

/* タイトル/価格との距離を少しだけ詰めたいとき（任意） */
.woocommerce ul.products li.product .price{
  margin-bottom: 1px !important; /* 例: 4〜10pxで調整 */
}

/* === タイトル＋価格を “pixivボタン ↔ カート” の中央に配置 === */
:root{
  --cart-lift: 12px;   /* ← カートを底から何px浮かすか。お好みで */
  --mid-gap:  6px;     /* ← タイトルと価格の間隔 */
}

.woocommerce ul.products li.product{
  display:flex; flex-direction:column;  /* 等高維持 */
}

.woocommerce ul.products li.product .astra-shop-summary-wrap{
  display:flex; flex-direction:column; flex:1 1 auto;
  padding-bottom: 0 !important;         /* 底余白はカート側で管理 */
}

/* 余計な上ブロックの余白は極力ゼロに（中央寄せの精度UP） */
.woocommerce ul.products li.product .ast-woo-product-category{
  margin:0 !important;
}

/* タイトル（a 包含）を“中央ブロック”の先頭にして上側スペースをauto配分 */
.woocommerce ul.products li.product .astra-shop-summary-wrap .ast-loop-product__link{
  order: 10;
  margin-top: auto !important;          /* ← ここがミソ：上側の空きが自動で広がる */
  display:block;
}
.woocommerce ul.products li.product .astra-shop-summary-wrap .woocommerce-loop-product__title{
  margin: 0 0 var(--mid-gap) !important;
}

/* 価格はタイトルの直後（中央ブロックの一部） */
.woocommerce ul.products li.product .astra-shop-summary-wrap .price{
  order: 11;
  margin: 0 0 0 !important;
}

/* カートボタンは最下段＋“底から少し浮かせる” */
.woocommerce ul.products li.product .astra-shop-summary-wrap .button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .add_to_cart_button,
.woocommerce ul.products li.product .astra-shop-summary-wrap .product_type_simple,
.woocommerce ul.products li.product .astra-shop-summary-wrap .product_type_variable{
  order: 99;
  margin-top: auto !important;          /* ← 下端へ押し下げる */
  margin-bottom: var(--cart-lift) !important;  /* ← 底から◯px浮かせる */
  align-self: stretch;
}

/* 既存デザインはそのまま。ホバー時だけ少し濃いピンクに */
:root{
  --btn-pink-dark: #e6327a; /* 好みで調整可。元色より少し濃い値 */
}

/* 一覧カードのボタン */
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .add_to_cart_button:hover{
  background: var(--btn-pink-dark) !important;
  border-color: var(--btn-pink-dark) !important;
  color:#fff !important;
}

/* 商品詳細ページの「カートに入れる」 */
.single-product .single_add_to_cart_button:hover{
  background: var(--btn-pink-dark) !important;
  border-color: var(--btn-pink-dark) !important;
  color:#fff !important;
}