/* ==========================================================================
   xicart-product.css — 产品卡
   DOM 契约（与子主题 functions.php / scripts/rebuild_cards_xicart.php 一致）：
     .xc-card      ← 网格 item 即卡片壳（post_class 加的）
       .xc-card__media                   ← porto-featured-image 块的 className
         .labels > .onsale/.onnew        ← Porto 自己的折扣标
         .stock.out-of-stock             ← Porto 自己的缺货标
         a.img-thumbnail > img + img.hover-image
         .tb-hover-content               ← 悬停浮层（加购 / 收藏 / 速览）
       .xc-card__body                    ← xicart/product-card-body 块输出
         .xc-card__cat / __title / __rating / __price
   规格来源：design/visual-spec.md 章节 C1 / C2 / C3
   ========================================================================== */

/* ── 1. 卡片壳 ─────────────────────────────────────────────────────────── */
.xc-card{
  position:relative;
  display:flex !important; flex-direction:column;
  height:100%;
  background:var(--xc-bg-soft) !important;
  border:1px solid var(--xc-border);
  border-radius:var(--xc-r-lg);
  overflow:hidden;
  box-shadow:var(--xc-sh-1);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s, border-color .28s, background-color .28s;
}
.xc-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--xc-sh-3);
  border-color:var(--xc-primary-200);
  background:#eff3f9 !important;
}

/* ── 2. 图片区（1:1）────────────────────────────────────────────────────── */
.xc-card__media{
  position:relative;
  padding:10px 10px 0;
  background:transparent;
}
.xc-card__media .img-thumbnail{
  display:block; position:relative;
  aspect-ratio:1 / 1; width:100%;
  overflow:hidden; border-radius:var(--xc-r-md);
  background:#fff;
}
.xc-card__media .img-thumbnail img{
  width:100%; height:100%; object-fit:contain;
  background:#fff;
  transition:opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.xc-card__media .img-thumbnail .hover-image{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:contain;
  background:#fff; opacity:0;
}
.xc-card:hover .xc-card__media .img-thumbnail .hover-image{ opacity:1; }
.xc-card:hover .xc-card__media .img-thumbnail img:first-child{ transform:scale(1.04); }

/* ── 3. 角标：折扣 / 新品 ───────────────────────────────────────────────── */
.xc-card__media .labels{
  position:absolute; z-index:5; top:18px; left:18px;
  line-height:1; text-align:left;
  font-size:var(--xc-fs-eyebrow); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
}
.xc-card__media .labels .onsale{
  display:block; padding:5px 10px; margin-bottom:5px;
  border-radius:var(--xc-r-xs); background:var(--xc-sale); color:#fff;
  box-shadow:0 4px 10px -3px rgba(217,45,32,.5);
}
.xc-card__media .labels .onnew{
  display:block; padding:5px 10px;
  border-radius:var(--xc-r-pill); background:var(--xc-new); color:#fff;
}
.xc-card__media .labels .onhot{
  display:block; padding:5px 10px; margin-bottom:5px;
  border-radius:var(--xc-r-xs); background:var(--xc-warn); color:#fff;
}

/* ── 4. 缺货徽标（右上角小角标，不再是压图大块文字）───────────────────── */
.xc-card__media .stock.out-of-stock{
  position:absolute; z-index:6; top:18px; right:18px;
  display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:var(--xc-r-xs);
  background:rgba(15,25,38,.82); color:#fff;
  font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  line-height:1.5; text-indent:0; width:auto; height:auto;
  backdrop-filter:blur(3px);
}
.porto-tb-item.outofstock .xc-card__media .img-thumbnail img{ filter:grayscale(1) opacity(.6); }

/* 缺货时加购按钮降级成 read more —— 必须单独样式 */
.xc-card .add_to_cart_read_more{
  background:rgba(255,255,255,.92) !important;
  border-color:var(--xc-border-strong) !important;
  color:var(--xc-text-2) !important;
}
.xc-card .add_to_cart_read_more:hover{ background:#fff !important; color:var(--xc-primary-500) !important; }

/* ── 5. 悬停浮层：圆形加购 / 收藏 / 速览 ───────────────────────────────── */
.xc-card__media .tb-hover-content{
  position:absolute; inset:0; z-index:4;
  display:flex !important; flex-direction:column; align-items:flex-end; gap:8px;
  padding:14px 14px 0 0;
  background:linear-gradient(200deg, rgba(255,255,255,0) 45%, rgba(255,255,255,.72) 100%);
  opacity:0; transition:opacity .25s ease;
}
.xc-card:hover .xc-card__media .tb-hover-content,
.xc-card:focus-within .xc-card__media .tb-hover-content{ opacity:1 !important; }
.xc-card__media .tb-hover-content .porto-tb-link{
  position:absolute; inset:0; z-index:0; width:100%; height:100%;
}
.xc-card__media .tb-hover-content > *{ position:relative; z-index:1; }

.xc-card__media .porto-tb-addcart,
.xc-card__media .porto-tb-quickview,
.xc-card__media .porto-tb-wishlist{
  position:relative; z-index:1;
  display:flex !important; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  background:#fff; color:var(--xc-text-1);
  border:1px solid var(--xc-border);
  box-shadow:var(--xc-sh-2);
  font-size:15px; line-height:1;
  transition:background-color .2s, color .2s, transform .2s, box-shadow .2s;
}
.xc-card__media .porto-tb-addcart:hover{
  background:var(--xc-grad-brand) !important; color:#fff !important; transform:scale(1.08);
  box-shadow:var(--xc-sh-brand); border-color:transparent;
}
.xc-card__media .porto-tb-quickview:hover{
  background:var(--xc-primary-500) !important; color:#fff !important; transform:scale(1.08); border-color:transparent;
}
.xc-card__media .porto-tb-wishlist{ width:auto; height:38px; padding:0 12px; border-radius:var(--xc-r-pill); }
.xc-card__media .porto-tb-wishlist:hover{ background:var(--xc-primary-500) !important; color:#fff !important; border-color:transparent; }
.xc-card__media .porto-tb-wishlist.hide-title a,
.xc-card__media .porto-tb-wishlist.hide-title span:not(.yith-wcwl-tooltip){ font-size:0; letter-spacing:0; }

/* ── 6. 卡片主体：分类 / 标题 / 评分 / 价格 ─────────────────────────────── */
.xc-card__body{
  flex:1 1 auto;
  display:flex; flex-direction:column;
  padding:14px 16px 18px;
  text-align:left;
}
.xc-card__cat{
  display:block; margin-bottom:6px;
  font-size:10px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--xc-text-3); line-height:1.4;
}
.xc-card__cat a{ color:inherit; text-decoration:none; }
.xc-card__cat a:hover{ color:var(--xc-primary-500); }

.xc-card__title{
  font-size:var(--xc-fs-body) !important;
  line-height:1.45 !important;
  font-weight:500 !important;
  letter-spacing:-.01em;
  color:var(--xc-text-1) !important;
  margin:0 0 8px !important;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.9em;
}
.xc-card__title a{ color:inherit !important; text-decoration:none; }
.xc-card__title a:hover{ color:var(--xc-primary-500) !important; }

.xc-card__rating{ margin-bottom:8px; }
.xc-card__rating .star-rating{ font-size:12px !important; letter-spacing:.5px; }

.xc-card__price{ margin-top:auto; }
.xc-card__price .price{
  font-size:var(--xc-fs-price-md) !important;
  font-weight:700 !important;
  letter-spacing:-.02em;
  color:var(--xc-text-1) !important;
}
.xc-card__price .price del{
  font-size:var(--xc-fs-body-sm); color:var(--xc-text-3); font-weight:400; margin-right:6px;
}
.xc-card__price .price ins{ text-decoration:none; }

/* ── 7. Trending 横排紧凑卡 ────────────────────────────────────────────── */
.xc-card:has(.xc-trend-card__body),
.xc-card:has(.xc-trend__body),
.xc-card:has(.xc-list__media){
  flex-direction:row; align-items:center; gap:16px;
  padding:10px 16px; background:var(--xc-bg-soft) !important;
}
.xc-card:has(.xc-trend-card__body) .xc-card__media,
.xc-card:has(.xc-trend__body) .xc-card__media,
.xc-card:has(.xc-list__media) .xc-card__media{
  flex:0 0 108px; width:108px; padding:0; order:0;
}
.xc-card:has(.xc-trend-card__body) .xc-card__media .img-thumbnail,
.xc-card:has(.xc-trend__body) .xc-card__media .img-thumbnail,
.xc-card:has(.xc-list__media) .xc-card__media .img-thumbnail{
  width:108px; height:108px; border-radius:var(--xc-r-md);
}
.xc-card:has(.xc-trend-card__body) .xc-card__media .img-thumbnail img,
.xc-card:has(.xc-trend__body) .xc-card__media .img-thumbnail img,
.xc-card:has(.xc-list__media) .xc-card__media .img-thumbnail img{
  width:108px; height:108px; object-fit:cover;
}
.xc-trend-card__body,
.xc-trend__body{
  flex:1 1 auto; min-width:0; padding:0;
  display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left;
}
.xc-trend-card__body .xc-card__title,
.xc-trend__body .xc-card__title{
  font-size:var(--xc-fs-body) !important; margin:0 !important; min-height:0 !important;
  -webkit-line-clamp:1; white-space:nowrap; text-overflow:ellipsis; display:block; overflow:hidden;
}
.xc-trend-card__body .xc-card__title a,
.xc-trend__body .xc-card__title a{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xc-trend-card__body .xc-card__price .price,
.xc-trend__body .xc-card__price .price{ font-size:var(--xc-fs-price-sm) !important; font-weight:600 !important; }
.xc-trend-card__arrow,
.xc-trend__arrow{ flex:0 0 auto; color:var(--xc-text-3); font-size:16px; }
.xc-trend-card__arrow:hover,
.xc-trend__arrow:hover{ color:var(--xc-primary-500); }

/* ── 8. 网格间距 ───────────────────────────────────────────────────────── */
.posts-wrap.has-ccols-spacing > *{ margin-bottom:var(--xc-card-gap); }

/* ==========================================================================
   缺货徽标 —— 强制覆盖（Porto / demo CSS 的整图遮罩特异性更高）
   ========================================================================== */
.xc-card .xc-card__media .stock.out-of-stock{
  position:absolute !important;
  inset:auto 16px 16px auto !important;
  top:16px !important; right:16px !important; left:auto !important; bottom:auto !important;
  width:auto !important; height:auto !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:4px 10px !important; margin:0 !important;
  border-radius:var(--xc-r-xs) !important;
  background:rgba(15,25,38,.82) !important;
  color:#fff !important;
  font-size:10px !important; font-weight:600 !important;
  letter-spacing:.08em !important; text-transform:uppercase !important;
  line-height:1.5 !important; text-indent:0 !important; text-align:center !important;
  opacity:1 !important; overflow:visible !important;
  z-index:6 !important;
  backdrop-filter:blur(3px);
}
.xc-card .xc-card__media .stock.out-of-stock::after{ content:none !important; }

/* ==========================================================================
   卡片标题截断（Porto 的 .porto-heading 会覆盖 display，导致 clamp 失效、
   长标题横向溢出到相邻列）—— 全部加 !important 锁死
   ========================================================================== */
.xc-card .xc-card__title{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  overflow:hidden !important;
  word-break:break-word !important;
  max-width:100% !important;
}
.xc-card .xc-card__title a{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  line-clamp:2 !important;
  overflow:hidden !important;
  word-break:break-word !important;
}