/* ============================================================
   THE49 商品页适配
   把子比商城的商品页组件（Vue 渲染的购买区、详情区）套进设计稿视觉体系。
   设计令牌取自设计稿 :root：--ink #182d27 / --green #275c48 / --line #e4e8e0 / --paper #f7f8f4
   ============================================================ */

/* ---------- 容器宽度：对齐设计稿实测值（max-width 1216 / padding 0 32）----------
   子比主题在商品页会覆盖 .container 的内边距，这里强制拉回，否则整页宽度会差 24px */
.t49-home .container,
.t49-product-page .container {
  max-width: 1216px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 导航：字重与当前项高亮（设计稿实测 fw700 + 绿色下划线）---------- */
.t49-home .main-nav a {
  font-weight: 700 !important;
  font-size: 12px !important;
  padding: 28px 0 !important;
}
.t49-home .main-nav a.active,
.t49-home .main-nav a:hover {
  color: var(--green, #275c48) !important;
}
.t49-home .main-nav a.active {
  border-bottom: 2px solid #6f9a54 !important;
}

body.t49-home.single-shop_product,
body.t49-home.t49-product-page {
  background: var(--paper, #f7f8f4);
}

.t49-product-page .container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* 页面主区留白 */
.t49-product-page { padding: 28px 0 60px; }

/* ---------- 购买按钮：统一为设计稿的按钮语言 ---------- */
.shop-buy-btn,
.shop-add-cart-btn,
.payvip-button,
.shop-paybtn-group .but {
  border-radius: 9px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 12px 19px !important;
  border: 0 !important;
  box-shadow: none !important;
  transition: opacity .15s ease, transform .15s ease;
}
.shop-buy-btn,
.payvip-button.jb-blue,
.shop-paybtn-group .but.jb-red {
  background: var(--ink, #182d27) !important;
  color: #fff !important;
}
.shop-add-cart-btn {
  background: #fff !important;
  color: var(--ink, #182d27) !important;
  border: 1px solid #dce2d7 !important;
}
.shop-buy-btn:hover, .shop-add-cart-btn:hover { opacity: .88; }

/* ---------- 卡片 / 面板：白底细边圆角 ---------- */
.t49-product-page .shop-single-content,
.t49-product-page .shop-detail,
.t49-product-page .panel,
.t49-product-page .box,
.t49-product-page .theme-box {
  background: #fff;
  border: 1px solid var(--line, #e4e8e0);
  border-radius: 16px;
}

/* ---------- 标题与价格 ---------- */
.t49-product-page h1 {
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -1.2px;
  color: var(--ink, #182d27);
}
.t49-product-page .price,
.t49-product-page .shop-price,
.t49-product-page .purchase-price .price {
  color: var(--ink, #182d27);
  font-weight: 700;
  letter-spacing: -.5px;
}

/* ---------- 标签 ---------- */
.t49-product-page .tag,
.t49-product-page .badge {
  border-radius: 5px;
  border: 1px solid var(--line, #e4e8e0);
  background: #fff;
  color: #65766b;
  font-size: 11px;
  padding: 3px 8px;
}

/* ---------- 输入 / 下拉 ---------- */
.t49-product-page select,
.t49-product-page input[type=text],
.t49-product-page input[type=number] {
  border-radius: 9px;
  border: 1px solid var(--line, #e4e8e0);
  padding: 10px 12px;
  background: #fff;
  color: var(--ink, #182d27);
}

/* ============================================================
   两栏布局：对齐设计稿的 detail-grid（左预览 / 右购买信息）
   子比原结构：single-header-box > single-product-cover-box + single-product-detail-box
   ============================================================ */
@media (min-width: 901px) {
  .single-shop_product .single-header-box,
  .t49-product-page .single-header-box {
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
}

/* 封面区：白底细边圆角，内部留白 */
.single-product-cover-box {
  background: #fff;
  border: 1px solid var(--line, #e4e8e0);
  border-radius: 16px;
  overflow: hidden;
  padding: 8px;
}
.single-product-cover-box img { border-radius: 12px; display: block; }

/* 详情区：去掉多余背景，让内容直接落在纸底上 */
.single-product-detail-box { padding-top: 4px; }

/* 标题：设计稿 h1 规格 */
.single-product-title,
.single-product-title h1,
.product-title-price-box .title {
  font-size: 34px !important;
  font-weight: 750 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.28 !important;
  color: var(--ink, #182d27) !important;
  margin-bottom: 10px !important;
}

/* 描述 */
.single-product-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: #5d6b62;
}

/* 价格：设计稿尺寸（大号 + 紧字距） */
.important-price-box .price-box,
.product-price-box .price-box {
  font-weight: 750 !important;
  letter-spacing: -1px;
  color: var(--ink, #182d27) !important;
}
.important-price-box .pay-mark,
.price-box .pay-mark {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--ink, #182d27) !important;
}
.important-price-box .price-str,
.price-box .price-str {
  font-size: 40px !important;
  font-weight: 750 !important;
  color: var(--ink, #182d27) !important;
}
.original-price-box .original-price {
  color: #98a29a !important;
  font-size: 13px !important;
}

/* 标签：设计稿的 tag 规格 */
.product-tags-box .tag,
.product-tags-box a,
.product-tags-box span {
  border-radius: 5px !important;
  border: 1px solid var(--line, #e4e8e0) !important;
  background: #fff !important;
  color: #65766b !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  margin-right: 6px;
}

/* 购买按钮组：整宽 + 设计稿按钮语言 */
.product-pay-button-box .but-group,
.shop-paybtn-group {
  display: flex !important;
  gap: 10px;
  margin-top: 16px;
}
.shop-buy-btn, .shop-add-cart-btn { flex: 1; }

/* ============================================================
   详情 / 评价 tab
   ============================================================ */
.t49-product-page .tab-content,
.t49-product-page .theme-box {
  background: #fff;
  border: 1px solid var(--line, #e4e8e0);
  border-radius: 16px;
}
.t49-product-page .tab-pane { padding: 4px 2px; }
.t49-product-page .product-article {
  font-size: 14.5px;
  line-height: 1.75;
  color: #3c4a42;
}
.t49-product-page .product-article h2,
.t49-product-page .product-article h3 {
  color: var(--ink, #182d27);
  letter-spacing: -.3px;
}

/* 推荐区商品卡：与设计稿卡片同语言 */
.t49-product-page .posts-nav-box .product-item {
  background: #fff;
  border: 1px solid var(--line, #e4e8e0);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.t49-product-page .posts-nav-box .product-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(30, 56, 37, .07);
}
.t49-product-page .product-item .item-price,
.t49-product-page .product-item .product-price {
  color: var(--ink, #182d27);
  font-weight: 700;
}

/* 评论 / 侧栏等附属区块统一为纸底 + 白卡 */
.t49-product-page .box,
.t49-product-page .sidebar,
.t49-product-page .sub-user-box {
  background: #fff;
  border: 1px solid var(--line, #e4e8e0);
  border-radius: 16px;
}

/* 面包屑 */
.t49-product-page .breadcrumbs,
.t49-product-page .breadcrumb {
  font-size: 12px;
  color: #8b968b;
}

/* ============================================================
   商品页右栏：对齐设计稿 detail-meta
   ============================================================ */
.t49-product-page .detail-meta { display: block; }
.t49-product-page .detail-meta .eyebrow { margin-bottom: 6px; }
.t49-product-page .detail-h1 {
  font-size: 34px !important;
  font-weight: 750 !important;
  letter-spacing: -1.2px !important;
  line-height: 1.28 !important;
  color: var(--ink, #182d27) !important;
  margin: 0 0 12px !important;
}
.t49-product-page .detail-meta .description {
  font-size: 14.5px;
  line-height: 1.7;
  color: #5d6b62;
  margin: 0 0 14px;
}

/* 隐藏子比输出的标题与描述（设计稿已在 detail-meta 里渲染，避免重复出现两个 h1） */
.t49-zibll-detail .single-product-title { display: none !important; }
.t49-zibll-detail .product-title-price-box > .single-product-title { display: none !important; }

/* 价格 + 按钮区 → 设计稿的 purchase-box 白卡 */
.t49-zibll-detail .product-price-box,
.t49-zibll-detail .product-price-discount-box,
.t49-zibll-detail .important-price-box {
  background: #fff;
  border: 1px solid var(--line, #e4e8e0);
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
  padding: 20px 22px 6px;
  margin-top: 10px;
}
.t49-zibll-detail .product-pay-button-box {
  background: #fff;
  border: 1px solid var(--line, #e4e8e0);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  padding: 6px 22px 20px;
}
/* 数量选择行若在卡片外，单独给个内边距 */
.t49-zibll-detail .product-quantity-box,
.t49-zibll-detail .quantity-box { padding: 8px 0; }

/* 右栏下方的规格表与按钮行 */
.t49-product-page .detail-secondary { margin-top: 14px; }
.t49-product-page .detail-stats { margin-top: 18px; }

/* ============================================================
   purchase-box：设计稿的价格卡结构（价格 + 说明 + 子比按钮 + fineprint）
   子比自己的价格显示隐藏掉，改用设计稿的 .purchase-price
   ============================================================ */
.t49-product-page .purchase-box {
  margin-top: 14px;
}
.t49-product-page .purchase-box .purchase-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}
.t49-product-page .purchase-box .purchase-price .price {
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -1px;
  color: var(--ink, #182d27);
  line-height: 1.2;
}
.t49-product-page .purchase-box .purchase-price .price small {
  font-size: 13px;
  font-weight: 500;
  color: #8b968b;
  margin-left: 6px;
  letter-spacing: 0;
}
.t49-product-page .purchase-box .purchase-price .terms {
  font-size: 12px;
  color: #77817b;
  text-align: right;
}
.t49-product-page .purchase-box .fineprint {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: #98a29a;
  text-align: center;
}

/* 隐藏子比的价格显示（改由 .purchase-price 呈现）*/
.t49-zibll-detail .product-price-discount-box,
.t49-zibll-detail .product-price-box,
.t49-zibll-detail .important-price-box,
.t49-zibll-detail .original-price-box { display: none !important; }

/* 子比的按钮容器在 purchase-box 内不再自带卡片边框 */
.t49-product-page .purchase-box .t49-zibll-detail .product-pay-button-box {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* ============================================================
   数量选择器（- 1 +）
   子比用 SVG sprite（<use xlink:href="#icon-minus">），而 sprite 由主题的
   footer.php 输出 —— 设计稿外壳替代了它，导致图标空白。这里用文字 + / − 兜底。
   ============================================================ */
.t49-product-page .number-spinner {
  display: inline-flex !important;
  align-items: center;
  border: 1px solid var(--line, #e4e8e0) !important;
  border-radius: 9px !important;
  background: #fff !important;
  overflow: hidden;
}
.t49-product-page .number-spinner > span {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  color: var(--ink, #182d27) !important;
  background: #fff;
  cursor: pointer;
  user-select: none;
}
.t49-product-page .number-spinner .minus-btn::before { content: '−'; font-size: 18px; font-weight: 600; line-height: 1; }
.t49-product-page .number-spinner .plus-btn::before { content: '+'; font-size: 18px; font-weight: 600; line-height: 1; }
.t49-product-page .number-spinner .minus-btn svg,
.t49-product-page .number-spinner .plus-btn svg { display: none !important; }
.t49-product-page .number-spinner .number-input {
  width: 44px !important;
  font-size: 14px !important;
  font-weight: 600;
  border-left: 1px solid var(--line, #e4e8e0);
  border-right: 1px solid var(--line, #e4e8e0);
}
.t49-product-page .number-spinner .minus-btn.is-disabled { opacity: .35; cursor: not-allowed; }
.t49-product-page .number-spinner > span:hover { background: #f3f6ef; }