/* ===== ANTRY B2B: XB Wishlist — Cleaned CSS ===== */

/* 共通トークン */
:root{
  --antry-btn: #766352;
  --antry-btn-hover: #5f5144;
}
.xb-wishlist-page{
  --row-y: 12px; 
  --cell-x: 12px; 
  --img: 88px;            /* PCサムネ */
}

/* テーブル基礎 */
.xb-wishlist-page .xb-list-style__table{
  table-layout: fixed;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.xb-wishlist-page .xb-list-style__thead th{
  padding: 10px var(--cell-x);
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,.08));
  font-weight: 600;
}
.xb-wishlist-page .xb-list-style__tbody tr > *{
  padding: var(--row-y) var(--cell-x);
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border, rgba(0,0,0,.06));
}

/* 商品名セル（画像＋テキスト） */
.xb-wishlist-page .xb-list-style__product-name{
  display: grid; 
  grid-template-columns: var(--img) 1fr; 
  gap: 12px; 
  align-items: center;
}
.xb-wishlist-page .xb-list-style__product-img,
.xb-wishlist-page .xb-list-style__product-img img{
  width: var(--img); 
  height: var(--img); 
  object-fit: cover; 
  border-radius: 6px;
}
.xb-wishlist-page .xb-list-style__product-title a{
  font-weight: 400; 
  line-height: 1.4; 
  color: inherit; 
  text-decoration: none;
}

/* バリエーション列（クローン表示） */
.xb-wishlist-page .xb-col-variant{ text-align: left; }
.xb-wishlist-page .xb-col-variant .xb-list-style__select{
  font: inherit; 
  min-width: 140px; 
  padding: 8px 28px 8px 10px; 
  border-radius: 6px;
}
/* 元セレクトは論理用に保持（JSで付与） */
.xb-wishlist-page .xb-variant--keep-for-logic{
  position: absolute !important; 
  left: -9999px !important; 
  width: 1px !important; 
  height: 1px !important;
  overflow: hidden !important; 
  clip: rect(0 0 0 0) !important;
}

/* 操作行（右寄せ） */
.xb-wishlist-page .xb-list-style__action{
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.xb-wishlist-page .xb-list-style__add-to-cart{ order: 1; }
.xb-wishlist-page .xb-list-style__product-del{ order: 2; }

/* ボタン */
.xb-wishlist-page .xb-list-style__add-to-cart:not(.xb-list-style__sold-out),
.xb-wishlist-products .xb-list-style__add-to-cart:not(.xb-list-style__sold-out){
  background-color: var(--antry-btn) !important;
  border-color: var(--antry-btn) !important;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.20rem;
  line-height: 1;
  padding: 12px 18px;
  border-radius: 9999px;
}
.xb-wishlist-page .xb-list-style__add-to-cart:not(.xb-list-style__sold-out):hover{
  background-color: var(--antry-btn-hover) !important;
  border-color: var(--antry-btn-hover) !important;
}
.xb-wishlist-page .xb-list-style__sold-out{
  font-size: 1.2rem; 
  padding: 12px 18px;
  border-radius: 9999px;
}
.xb-wishlist-page .xb-list-style__product-del{
  color:#000 !important; 
  font-weight:600; 
  font-size:1.15rem; 
  line-height:1.1;
  background:transparent !important; 
  border:0 !important; 
  text-decoration:none; 
  cursor:pointer;
}
.xb-wishlist-page .xb-list-style__product-del:hover{ text-decoration: underline; opacity:.9; }

/* 価格桁を整える */
.xb-wishlist-page .xb-list-style__price{ font-variant-numeric: tabular-nums; }

/* =========================
   PC（≥990px）
   ========================= */
@media (min-width: 990px){
  /* 列幅：商品名 / バリ / 価格 / 在庫 / 操作 */
  .xb-wishlist-page .xb-list-style__thead th:nth-child(1){ width:40%; }
  .xb-wishlist-page .xb-list-style__thead th:nth-child(2){ width:16%; }
  .xb-wishlist-page .xb-list-style__thead th:nth-child(3){ width:14%; }
  .xb-wishlist-page .xb-list-style__thead th:nth-child(4){ width:10%; }
  .xb-wishlist-page .xb-list-style__thead th:nth-child(5){ width:20%; }

  .xb-wishlist-page .xb-list-style__price,
  .xb-wishlist-page .xb-list-style__stock{ text-align: center; }
  .xb-wishlist-page .xb-list-style__action-row{ text-align: right; }

  /* 自動更新中（行が無い間）はテーブル/ヘッダーを隠してズレ防止＋骨組み表示 */
  .xb-wishlist-page:not(:has(.xb-list-style__tbody tr)) .xb-list-style__table,
  .xb-wishlist-page:not(:has(.xb-list-style__tbody tr)) .xb-list-style__thead{
    visibility: hidden;
  }
  .xb-wishlist-page:not(:has(.xb-list-style__tbody tr))::before{
    content: "";
    display: block;
    height: 140px;
    margin: 24px 0;
    border-radius: 12px;
    background: linear-gradient(90deg,#f3f3f3 25%,#eaeaea 37%,#f3f3f3 63%);
    background-size: 400% 100%;
    animation: xb-shimmer 1.2s ease-in-out infinite;
  }
  @keyframes xb-shimmer{
    0% { background-position: 100% 0; }
    100%{ background-position:   0   0; }
  }
}

/* =========================
   モバイル（≤768px）
   ========================= */
@media (max-width: 768px){
  .xb-wishlist-page{ 
    --img: 72px;                  /* モバイルのサムネ */
    --card-radius: 14px;
    --card-stroke: rgba(0,0,0,.12);
    --card-shadow: rgba(0,0,0,.05);
  }
  /* thead 非表示 */
  .xb-wishlist-page .xb-list-style__thead{ display:none; }

  /* 行＝カード化（insetストロークで枠、影はごく弱く） */
  .xb-wishlist-page .xb-list-style__tbody tr{
    display: grid;
    grid-template-columns: var(--img) 1fr;
    grid-template-areas:
      "name  name"
      "variant variant"
      "price  stock"
      "action action";
    row-gap: 10px;
    column-gap: 12px;
    padding: 14px 12px;
    margin: 12px clamp(12px, 4vw, 18px);   /* 左右ガター */
    border-radius: var(--card-radius);
    background: #fff;
    box-shadow:
      0 0 0 1px var(--card-stroke) inset,
      0 2px 4px var(--card-shadow);
  }
  .xb-wishlist-page .xb-list-style__tbody tr > *{
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
  }

  /* エリア割り当て */
  .xb-wishlist-page .xb-list-style__tbody tr > th:nth-child(1){ grid-area: name; }
  .xb-wishlist-page .xb-list-style__tbody tr > th.xb-col-variant{ grid-area: variant; }
  .xb-wishlist-page .xb-list-style__tbody tr > th.xb-list-style__price{ grid-area: price; text-align:left; }
  .xb-wishlist-page .xb-list-style__tbody tr > th.xb-list-style__stock{ grid-area: stock; text-align:right; }
  .xb-wishlist-page .xb-list-style__tbody tr > .xb-list-style__action-row{ grid-area: action; }

  /* バリエーション：ラベル＆フル幅 */
  .xb-wishlist-page .xb-col-variant .xb-list-style__select{
    width: 100%; 
    min-width: 0; 
    padding: 10px 28px 10px 12px;
    border: 1px solid rgba(0,0,0,.18);
    border-radius: 10px;
    background: #fff;
  }
  .xb-wishlist-page .xb-col-variant::before{
    content: 'バリエーション';
    display: block; 
    margin: 2px 0 6px; 
    font-size: .82rem; 
    color: rgba(0,0,0,.55);
  }
  /* バリエーションなしは列非表示 */
  .xb-wishlist-page .xb-list-style__tbody tr:not(.has-variant) .xb-col-variant{ display:none; }

  /* 操作段：右寄せのまま、削除は折り返し防止 */
  .xb-wishlist-page .xb-list-style__action{
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
    gap: 12px; 
    width: 100%;
  }
  .xb-wishlist-page .xb-list-style__product-del{
    white-space: nowrap; 
    word-break: keep-all; 
    opacity: .85;
  }

  /* モバイルのボタンは少しだけ小さめ */
  .xb-wishlist-page .xb-list-style__add-to-cart:not(.xb-list-style__sold-out){
    font-size: 1rem; 
    padding: 10px 16px;
  }

  /* 親のクリップ対策（影/角丸が切れないように） */
  .content-for-layout,
  .shopify-section,
  .section-template__main,
  .page-width,
  .rte.scroll-trigger,
  .xb-wishlist-page { overflow: visible !important; }
}

/* ============ PDP | XB Wishlist ボタンをテーマのボタンと揃える ============ */
:root{
  /* 色はサイトの指定値に合わせておく */
  --antry-btn: #766352;          /* 追加前（プライマリ） */
  --antry-btn-hover: #5f5144;
  --antry-btn-muted: #d1d1d1;    /* 追加済（セカンダリ相当/お好みで） */

  /* 角丸/サイズはテーマ変数があれば流用、無ければ値で */
  --btn-radius: var(--buttons-radius, 9999px);
  --btn-font: 1.5rem;
  --btn-pad-y: 15px;
  --btn-pad-x: 24px;
  --btn-min-h: 48px;             /* カートボタンに高さを合わせる目安 */
}

/* PDPのウィッシュリストボタン（広めにフック） */
.product-form [class*="xb-wishlist"] button,
.product__info-container [class*="xb-wishlist"] button,
#MainProduct [class*="xb-wishlist"] button{
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: var(--btn-min-h);
  border-radius: var(--btn-radius);
  border: 0;
  line-height: 1;
  font-size: var(--btn-font);
  font-weight: 700;
  box-shadow: 0 2px 0 rgba(0,0,0,.06);
}

/* 追加前（＝保存リストに追加） */
.product-form [class*="xb-wishlist"] button:not(.is-added):not([aria-pressed="true"]){
  background: var(--antry-btn);
  color: #fff;
}
.product-form [class*="xb-wishlist"] button:not(.is-added):not([aria-pressed="true"]):hover{
  background: var(--antry-btn-hover);
}

/* 追加済（＝保存リストに追加済み / 削除） */
.product-form [class*="xb-wishlist"] button.is-added,
.product-form [class*="xb-wishlist"] button[aria-pressed="true"],
.product-form [class*="xb-wishlist"].xb-wishlist-added button{
  background: var(--antry-btn-muted);
  color: #fff;
}

/* アイコン付きでも綺麗に中央寄せ */
.product-form [class*="xb-wishlist"] button svg{
  width: 1.1em; height: 1.1em;
}

:root{ --pdp-btn-gap: 7px; }          /* 好きな間隔に */

 /* 「カートに追加」の直後に来るウィッシュリストの塊にだけ余白 */
.product-form .product-form__submit + [class*="xb-wishlist"],
.product-form button[name="add"] + [class*="xb-wishlist"],
.product-form [class*="product-form__buttons"] > [class*="xb-wishlist"]{
  margin-top: var(--pdp-btn-gap) !important;
}

/* 既存の一律マージンを無効化（重複しないように） */
.product-form [class*="xb-wishlist"]{ margin-top: 0; }

/* === Fix: 最下行のコンテンツ幅が狭まる問題 === */

/* モバイル行カードの2列目を minmax(0,1fr) にして縮みを防止 */
@media (max-width: 768px){
  .xb-wishlist-page .xb-list-style__tbody tr{
    grid-template-columns: var(--img) minmax(0,1fr);
  }
  .xb-wishlist-page .xb-list-style__product-name{ min-width: 0; }
  .xb-wishlist-page .xb-list-style__product-title,
  .xb-wishlist-page .xb-list-style__product-title a{
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-overflow: ellipsis;
  }
}

/* デスクトップ時：tbodyセル側にも列幅を明示して再計算を抑止 */
@media (min-width: 990px){
  .xb-wishlist-page .xb-list-style__tbody tr > *{ 
    box-sizing: border-box;
    min-width: 0;        /* 内部の最小幅主張を無効化 */
  }
  .xb-wishlist-page .xb-list-style__tbody tr > :nth-child(1){ width:40%; }
  .xb-wishlist-page .xb-list-style__tbody tr > :nth-child(2){ width:16%; }
  .xb-wishlist-page .xb-list-style__tbody tr > :nth-child(3){ width:14%; }
  .xb-wishlist-page .xb-list-style__tbody tr > :nth-child(4){ width:10%; }
  .xb-wishlist-page .xb-list-style__tbody tr > :nth-child(5){ width:20%; }

  /* 念のためテーブル側も明示 */
  .xb-wishlist-page .xb-list-style__table{
    table-layout: fixed;
    width: 100%;
  }
}

/* アクション行の伸縮が他列に影響しないよう固定化（共通） */
.xb-wishlist-page .xb-list-style__action{
  flex: 0 0 auto;
}