/* ------------------------------------------------------------------
 * WordPress 插件层收敛样式（不属于静态站设计，由主题单独加载）
 * 目的：把插件注入的浮层/按钮收敛到新版留白风，避免压住首屏。
 * 加载顺序：style.css 之后
 * ------------------------------------------------------------------ */

/* ---------- 1) CookieYes 同意条：440px 白色浮卡 → 贴底整宽细条 ---------- */
.cky-consent-container{width:100%!important;max-width:100%!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;border-radius:0!important}
.cky-consent-container .cky-consent-bar{border:0!important;border-top:1px solid var(--line)!important;border-radius:0!important;background:#fff!important;box-shadow:0 -10px 28px rgba(16,24,40,.06)!important;padding:16px 0!important}
.cky-consent-container .cky-notice{max-width:var(--maxw);margin:0 auto;padding:0 24px!important;display:flex;align-items:center;gap:26px}
.cky-notice .cky-title{font-size:14px!important;line-height:1.4!important;margin:0!important;white-space:nowrap;color:var(--ink)!important}
.cky-notice .cky-notice-group{display:flex;align-items:center;gap:22px;flex:1 1 auto;min-width:0}
.cky-notice-des{font-size:13px!important;line-height:1.55!important;flex:1 1 auto;max-width:none!important;max-height:none!important;overflow:visible!important}
.cky-notice-des p{margin:0!important;color:var(--muted)!important}
.cky-notice-btn-wrapper{flex:0 0 auto!important;margin-top:0!important;flex-wrap:nowrap!important;gap:8px}
.cky-notice-btn-wrapper .cky-btn{margin:0!important;padding:9px 16px!important;font-size:13px!important;line-height:1.2!important;border-width:1px!important;border-radius:0!important;width:auto!important;min-height:0!important;letter-spacing:.02em}
.cky-notice-btn-wrapper .cky-btn-customize,.cky-notice-btn-wrapper .cky-btn-reject{color:var(--ink)!important;background:#fff!important;border-color:var(--line)!important}
.cky-notice-btn-wrapper .cky-btn-accept{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}

/* ---------- 2) WhatsApp 气泡：只保留主题自制的 .wa-fab，插件气泡一律不显示 ----------
 * 2026-11-06 事故：右下角出现「两个重叠的 WhatsApp 图标」。
 * 原因：主题 inc/chrome.php 注入的自制圆钮 .wa-fab 与插件 click-to-chat-for-whatsapp
 *       输出的 #ht-ctc-chat 同时渲染，两个 56px 绿钮各自 fixed 定位、错开约 1/4 身位，
 *       叠加后就是一个绿圈压着一个绿方块（截图症状）。
 * 该插件的功能已被 .wa-fab 完全替代（点击弹出二维码卡片、中英双语、aria 属性齐全、
 * 移动端 50px 自适应）。本地环境当时是停用了插件的，但生产库未停用，
 * 所以这里用样式兜底：无论插件是否被启用，注入的气泡都不会再露出来。
 * 保留原「避让同意条」规则无意义，一并删除。
 * 若将来真要恢复插件气泡，删掉本条即可（.wa-fab 会同时需要移除）。
 */
#ht-ctc-chat,
.ht-ctc-chat,
#ht-ctc-chat-invitation,
.ht-ctc-chat-invitation{display:none!important}

/* ---------- 3) Astra 的回到顶部按钮（父主题残留），新版设计里不要 ---------- */
#ast-scroll-top{display:none!important}

/* ---------- 4) WooCommerce 通知条与表单按钮对齐新版风格 ---------- */
.woocommerce-message,.woocommerce-info,.woocommerce-error{border-radius:0!important;box-shadow:none!important;border-left:2px solid var(--ink)!important;background:#fafafa!important;color:var(--ink)!important;font-size:14px!important}
.woocommerce-message::before,.woocommerce-info::before{color:var(--ink)!important}
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit{border-radius:0!important;background:var(--ink)!important;color:#fff!important;font-weight:500!important;
  /* 全局 reset 把 padding 清成 0，按钮黑底只剩文字宽度，"Return to shop" 会溢出到白底上 */
  padding:9px 16px!important;line-height:1.3!important;font-size:13px!important;
  display:inline-flex!important;align-items:center;justify-content:center;height:auto!important;min-height:0!important;white-space:nowrap}
.woocommerce a.button.alt,.woocommerce button.button.alt{background:var(--ink)!important}

/* 手机端：竖排大卡片（约 300px，吃掉三分之一屏）→ 贴底单行细条（约 90px）
 * 关键：保留"同意/拒绝"两个主操作，描述压到 2 行，标题与"自定义"让位
 * 2026-11-04：原先 flex-direction:column 让弹窗高达 300px，把首屏标题与 CTA 全压住 */
@media(max-width:640px){
  .cky-consent-container .cky-consent-bar{padding:10px 0!important}
  .cky-consent-container .cky-notice{flex-direction:row;align-items:center;gap:10px;padding:0 14px!important}
  .cky-notice .cky-title{display:none!important}
  .cky-notice .cky-notice-group{flex-direction:row;align-items:center;gap:8px}
  .cky-notice-des{flex:1 1 auto;min-width:0;font-size:11.5px!important;line-height:1.4!important;
    display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important;text-overflow:ellipsis}
  .cky-notice-des p{font-size:11.5px!important;line-height:1.4!important}
  .cky-notice-btn-wrapper{flex:0 0 auto!important;flex-direction:row!important;flex-wrap:nowrap!important;gap:6px}
  .cky-notice-btn-wrapper .cky-btn{flex:0 0 auto!important;padding:7px 11px!important;font-size:11.5px!important;white-space:nowrap}
  .cky-notice-btn-wrapper .cky-btn-customize{display:none!important}
}

/* ---------- 5) 购买链路：加入购物车 / 立即购买 ---------- */
.btn-buy{display:inline-flex;align-items:center;gap:0;background:var(--ink);border-color:var(--ink);color:#fff}
.btn-buy:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-buy .btn-buy-price{padding-left:13px;margin-left:13px;border-left:1px solid rgba(255,255,255,.34);font-weight:700;letter-spacing:.01em}
.btn-buy-now,.btn-buy-alt{display:inline-flex;align-items:center;gap:0}
.btn-buy-alt .btn-buy-price{padding-left:11px;margin-left:11px;border-left:1px solid currentColor;opacity:.72;font-weight:600}
a.btn-buy-alt{border-color:rgba(255,255,255,.55);color:#fff}
a.btn-buy-alt:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

/* 首页产品卡片价格 */
.pd-body .pd-price{margin-top:10px;font-size:clamp(1rem,1.5vw,1.2rem);font-weight:700;color:#fff;letter-spacing:.01em;line-height:1.3}
.pd-body .pd-price .pd-unit{margin-left:7px;font-size:10.5px;font-weight:600;letter-spacing:.16em;color:rgba(255,255,255,.62);text-transform:uppercase;vertical-align:2px}

/* 导航购物车与角标 */
.cart-item{display:flex;align-items:center}
.cart-link{position:relative;display:inline-flex;align-items:center;gap:7px}
.cart-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;font-size:11px;font-weight:700;line-height:1;color:#fff;background:var(--ink);border-radius:9px;font-style:normal}
.cart-count.is-empty{display:none}

/* CTA 辅助说明（浅色区块用） */
.cta-note{font-size:13px;color:var(--muted);align-self:center;line-height:1.5}

/* 移动端：购买按钮整宽，避免小屏挤压 */
@media (max-width:640px){
  .cta .btn-buy,.cta .btn-buy-now{flex:1 1 100%;justify-content:center}
}

/* ---------- 6) Shop 商品列表：主图统一 1:1 + 卡片元素对齐 ----------
 * 问题：WooCommerce 缩略图沿用 300×300 的 HTML 宽高属性，部分卡片主图撑到 345，
 * 同一行出现 300/345 两种尺寸 → 标题、价格、加购按钮整体错位 45px。
 * 做法：主图框强制 1:1 铺满卡片宽度，object-fit:cover 裁切；卡片改 flex，底部元素贴底。
 */
.woocommerce ul.products li.product{display:flex!important;flex-direction:column}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap{
  width:100%!important;height:auto!important;aspect-ratio:1/1;overflow:hidden;background:#fff
}
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img{
  width:100%!important;height:100%!important;max-width:none!important;
  aspect-ratio:1/1;object-fit:cover;object-position:center 32%;display:block
}
.woocommerce ul.products li.product .astra-shop-summary-wrap{flex:1 1 auto}
.woocommerce ul.products li.product .tinv-wraper{margin-top:auto}
/* X1 磨砂黑主图用的是「两种颜色对比」横图（左=Ti 原色 / 右=磨砂黑），
   WP 生成的 300×300 缩略图把两侧都裁掉了，只剩中间各半。这里直接用原图，
   取右侧并 contain，完整落在磨砂黑那半 */
.woocommerce ul.products li.product img[src*="x1-colors"]{
  content:url("/wp-content/uploads/2026/10/x1-colors.jpg");
  object-fit:cover!important;object-position:right center!important
}
/* 商品名固定两行，避免长短标题把价格推歪 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .ast-loop-product__link{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em
}

/* ---------- 7) WooCommerce 页面容器 ----------
 * 问题：functions.php 停用了 astra-theme-css，Astra 的 .ast-container（max-width + 左右内边距）
 * 随之消失，Shop / 购物车 / 结算 / 商品详情的内容一路铺到屏幕边缘，与站内其他页面对不齐。
 * 做法：给 #primary 补回与 .container 一致的宽度约束；商品网格由固定像素列改为弹性列。
 */
.woocommerce #primary.content-area,
.woocommerce-page #primary.content-area{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%}
.woocommerce .ast-woocommerce-container,
.woocommerce-page .ast-woocommerce-container{width:100%;max-width:none;padding:0}

/* 商品网格：9 个商品在 4 列下最后一行只剩 1 个孤立卡片；3 列正好 3×3，单图也更大 */
@media(min-width:992px){
  .woocommerce ul.products.columns-4{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:34px 26px!important}
}
.woocommerce ul.products{column-gap:20px!important}

@media(max-width:640px){
  .woocommerce #primary.content-area,
  .woocommerce-page #primary.content-area{padding:0 18px}
  .woocommerce ul.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:26px 14px!important}
}

/* ---------- 8) 商品详情页（/product/xxx/） ----------
 * 问题：单产品页主图区沿用 Astra 的 float 布局且宽度被压缩，图片只占左栏一小块，
 * 右侧标题被挤成三行，整页重心偏左、与站内其他详情页调性不一致。
 * 做法：两栏各半、图片撑满栏宽、标题字号收紧。
 */
.woocommerce div.product div.images,
.woocommerce div.product div.summary{width:100%!important;float:none!important;margin:0!important}
.woocommerce div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);row-gap:0;align-items:start}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .up-sells{grid-column:1/-1}
.woocommerce div.product div.images img{width:100%!important;height:auto!important;display:block}
.woocommerce div.product .product_title{font-size:clamp(1.4rem,2.4vw,1.9rem)!important;line-height:1.3!important;letter-spacing:-.01em;margin-bottom:14px}
.woocommerce div.product p.price{font-size:clamp(1.15rem,1.8vw,1.4rem)!important;font-weight:700;margin-bottom:18px}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);font-size:14.5px;line-height:1.75}
.woocommerce div.product form.cart{margin-top:22px;display:flex;align-items:center;flex-wrap:wrap;gap:14px 20px}
.woocommerce div.product form.cart .tinv-wraper{margin:0!important}
@media(max-width:860px){
  .woocommerce div.product{grid-template-columns:1fr;row-gap:26px}
}

/* ---------- 9) 移动端 hero 行动按钮：等宽网格 + 给右下角 WhatsApp 气泡让位 ----------
 * 问题：CTA 原先是 flex 换行，"加入购物车/立即购买"整宽、后面的"套装/查看规格"各自按文字宽度
 * 撑开（192 vs 111），同一行两个按钮宽度不一致；右下角 WhatsApp 气泡又正好压在最后一个按钮上。
 * 做法：改 2 列网格——前两个主操作跨满整行，其余按格均分，落单的最后一个也跨满；
 * 同时把 hero 内容整体上抬 96px，气泡落在按钮下方的空白里。
 */
@media(max-width:640px){
  .hero .cta{display:flex!important;flex-direction:column;align-items:stretch;gap:8px}
  .hero .cta > *{width:100%!important;min-width:0;display:flex!important;justify-content:center;margin:0!important;white-space:nowrap}
  .hero.hero-photo .container{padding-bottom:96px}
}

/* Cookie 条还在屏幕上时，主题自制气泡 .wa-widget 上抬让位（见本节末尾的 :has 规则）；
 * 插件气泡 #ht-ctc-chat 已在本文件第 2 节整体隐藏，这里不再需要单独处理 */

/* 桌面端同上：Cookie 条 76px 贴底，会把产品页 hero 的按钮压住，内容区多留一点底边距 */
@media(min-width:641px){
  .hero.hero-photo .container{padding-bottom:104px}
  /* hero 里只剩一个主行动按钮时（如 X1 只留「立即购买」），按文字宽度收缩会显得单薄、
     和大幅 hero 不成比例 —— 给它固定宽度和更大的内边距，成为明确的主行动。
     多按钮的页面（V1 / C1）不受影响，因为 :only-child 不成立 */
  .hero .cta > .btn:only-child{
    min-width:240px;padding:17px 40px;font-size:15px;
    display:inline-flex;align-items:center;justify-content:center
  }
}

/* hero 图偏暗，黑底按钮会糊进照片里 —— 单按钮场景反过来用白底深字，对比度最高（桌面手机都适用） */
.hero .cta > .btn:only-child{
  background:#fff!important;border-color:#fff!important;color:var(--ink)!important
}
.hero .cta > .btn:only-child:hover{
  background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important
}

/* WhatsApp 浮动按钮：CookieYes 条出现时上抬，避免被同意条压住点不到
   （实测条高：桌面 76px / 手机 53px，各留 16px 间隙） */
body:has(.cky-consent-container:not(.cky-hide)) .wa-widget{bottom:92px}
@media(max-width:600px){
  body:has(.cky-consent-container:not(.cky-hide)) .wa-widget{bottom:69px}
}