/**
 * CXB B2B —— 【CXB B2B 产品询盘】Elementor 小部件样式层
 *
 * 句柄：cxb-b2b-elementor-inquiry
 * 加载顺序：frontend(.min).css → 后台动态内联样式 → product-card-ui(.min).css → 本文件
 *
 * 四条硬约束（改这个文件前先读）：
 *
 * 1. 不碰后台可配色。后台通过 wp_add_inline_style 输出的
 *      .cxb-b2b-product-card{background-color:X!important}
 *      .cxb-b2b-product-card{border-color:Y!important}
 *      .cxb-b2b-add-to-quote-button{background-color:Z!important}
 *    都带 !important。本文件一律不写这三项，配色权归后台与小部件样式页；
 *    小部件样式页那几个颜色控件也带 !important，且只在填了值时才输出，
 *    留空时后台全局配色照常生效。
 *
 * 2. 栅格不复用 .cxb-b2b-products-grid / .cxb-b2b-columns-N。frontend.css 在
 *    1200px、768px、480px 三处对那套类名写死了列数，小部件的响应式列数会被
 *    它们盖掉。本文件用 .cxb-iq-grid ＋ --cxb-iq-cols，列数由 Elementor
 *    响应式控件写入，各断点由 Elementor 自己的媒体查询负责。
 *
 * 3. 悬停效果靠 .cxb-iq[data-hover="…"] 这一层做开关。frontend.css 与
 *    product-card-ui.css 里的图片放大是无条件的（:hover 时 scale 1.05 / 1.07），
 *    要做到「无效果」「切图」「灰度」等必须能压过它们：卡片类名重复两次把
 *    特异度抬到与卡片层持平，再靠本文件后加载取胜。改依赖顺序会破坏这一点。
 *
 * 4. 标题标签可配。frontend.css 的标题基础样式挂在 h6.cxb-b2b-product-title 上，
 *    小部件允许把标题换成 H2—H5 / DIV / SPAN，那些标签选不中原规则。第 5 节
 *    补了一份与标签无关的等价样式，只在非 h6 时接管。
 */

/* ==========================================================================
   1. 栅格
   ========================================================================== */

.cxb-iq {
    /* 供各控件写入的变量，全部给出兜底值，控件留空时也能正常显示 */
    --cxb-iq-ratio: 1 / 1;
    --cxb-iq-fit: contain;
    --cxb-iq-zoom: 1.07;
    --cxb-iq-lift: -6px;
    --cxb-iq-title-lines: 2;
    --cxb-iq-excerpt-lines: 2;
    --cxb-iq-justify: flex-start;
    --cxb-iq-overlay: rgba(15, 23, 42, 0.34);
}

.cxb-iq-grid {
    display: grid;
    grid-template-columns: repeat(var(--cxb-iq-cols, 3), minmax(0, 1fr));
    column-gap: var(--cxb-iq-col-gap, 24px);
    row-gap: var(--cxb-iq-row-gap, 24px);
    align-items: var(--cxb-iq-align, stretch);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* minmax(0,1fr) 已经允许列收缩，卡片自身再声明一次 min-width:0，
   避免长单词或不换行的 SKU 值把整列撑破。 */
.cxb-iq-grid > .cxb-iq-card {
    margin: 0;
    min-width: 0;
}

/* 高度交给栅格的 align-items，卡片自己不再写 height。
   2.2.0 曾在这里写过 height:100%，那是从 frontend.css 抄来的多余一笔：
   栅格项在 align-items:stretch 下本来就会被拉满，再叠一条百分比高度只会
   让「按各自内容高度」那一档失效。

   极简悬停式必须排除在外。它的展开面板是 position:absolute，插件靠
   `align-self: start` 让卡片保持「图片＋标题」的自然高度，面板才有地方
   往下铺；这里若统一改成 stretch，卡片会被拉到整行高度，面板的
   top: calc(100% - 16px) 跟着往下挪，正好挪出卡片之外。 */
.cxb-iq-grid > .cxb-iq-card.cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden) {
    align-self: var(--cxb-iq-align, stretch);
}

/* 屏幕外卡片延迟渲染。
   高度已由 aspect-ratio 锁定，contain-intrinsic-size 给出的估算值只在
   元素完全跳过渲染时生效，滚动到视口内即被真实高度取代，不会跳动。 */
.cxb-iq-card--defer {
    content-visibility: auto;
    contain-intrinsic-size: auto 360px;
}

/* 无产品提示 */
.cxb-iq-empty {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: #7c8ba1;
    font-size: 14px;
}

.cxb-iq-empty-hint {
    padding-top: 0;
    font-size: 12.5px;
    opacity: 0.85;
}

/* ==========================================================================
   2. 图片区：比例、填充方式、内边距
   特异度说明：frontend.css 的
     .cxb-b2b-product-image-wrapper{aspect-ratio:1/1}          (0,1,0)
     .cxb-b2b-product-thumbnail img{object-fit:contain}        (0,1,1)
   下面用 .cxb-iq 前缀 ＋ 卡片类名抬到 (0,3,0)/(0,3,1) 以上。
   ========================================================================== */

.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-image-wrapper {
    aspect-ratio: var(--cxb-iq-ratio, 1 / 1);
    position: relative;
    overflow: hidden;
}

.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-thumbnail img,
.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-thumbnail-left img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: var(--cxb-iq-fit, contain);
    /* 样式页的「图片内边距」加在 img 上，没有 border-box 会把图撑出图片区 */
    box-sizing: border-box;
}

/* 极简悬停式锁死 1:1。它的展开面板 top 偏移是按「1:1 图 ＋ 固定两行标题」
   推出来的，比例一变，面板与卡片之间会出现缝隙或重叠。 */
.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card .cxb-b2b-product-image-wrapper {
    aspect-ratio: 1 / 1;
}

/* 占位图不铺满，居中显示一个小图标即可 */
.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-thumbnail-empty .cxb-b2b-product-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-thumbnail-empty img.cxb-b2b-product-image-placeholder {
    width: 38%;
    height: auto;
    opacity: 0.45;
    object-fit: contain;
}

/* ==========================================================================
   3. 悬停效果
   data-hover 由 PHP 写在 .cxb-iq 上；单张卡片另有 data-hover-effect，
   供 frontend.js 与既有的 has-second-image 规则使用，两者不冲突。
   ========================================================================== */

/* ---- 3.1 无效果 ---- */
.cxb-iq[data-hover="none"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="none"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail-left img {
    transform: none;
}

.cxb-iq[data-hover="none"] .cxb-b2b-product-card.cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden):hover,
.cxb-iq[data-hover="none"] .cxb-b2b-product-card.cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden):focus-within {
    transform: none;
}

/* ---- 3.2 图片放大（倍数可调） ---- */
.cxb-iq[data-hover="zoom"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="zoom"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail-left img,
.cxb-iq[data-hover="zoom-lift"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="zoom-lift"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail-left img {
    transform: scale(var(--cxb-iq-zoom, 1.07));
}

/* ---- 3.3 卡片上浮 ----
   product-card-ui.css 的默认上浮是 -4px，这里改成可调；
   极简悬停式排除在外，它的景深走 drop-shadow 包裹整体轮廓。 */
.cxb-iq[data-hover="lift"] .cxb-b2b-product-card.cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden):hover,
.cxb-iq[data-hover="zoom-lift"] .cxb-b2b-product-card.cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden):hover {
    transform: translateY(var(--cxb-iq-lift, -6px));
}

/* 只上浮不放大 */
.cxb-iq[data-hover="lift"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="lift"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail-left img {
    transform: none;
}

/* ---- 3.4 图片压暗遮罩 ----
   product-card-ui.css 已给 .cxb-b2b-product-image-wrapper::after 铺了一层
   自下而上的浅渐变（悬停时 opacity 0→1），这里把它换成整块纯色遮罩，
   避免叠两层导致下缘过深。 */
.cxb-iq[data-hover="overlay"] .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-image-wrapper::after {
    inset: 0;
    height: auto;
    background: var(--cxb-iq-overlay, rgba(15, 23, 42, 0.34));
}

.cxb-iq[data-hover="overlay"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="overlay"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail-left img {
    transform: none;
}

/* ---- 3.5 灰度转彩色 ---- */
.cxb-iq[data-hover="gray"] .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="gray"] .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-thumbnail-left img {
    filter: grayscale(1);
    transition: filter 0.42s cubic-bezier(0.16, 1, 0.3, 1), transform 0.62s cubic-bezier(0.16, 1, 0.3, 1);
}

.cxb-iq[data-hover="gray"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="gray"] .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail-left img {
    filter: grayscale(0);
    transform: none;
}

/* ---- 3.6 切换第二张图 ----
   交叉淡入由 frontend.css 的 .has-second-image 规则负责，这里只关掉放大，
   两个动作同时发生时观感很乱。产品图集不足两张的卡片拿不到
   has-second-image，PHP 已把它的 data-hover-effect 回落成 zoom，
   所以下面用属性选择器精确命中，不会误伤。 */
.cxb-iq[data-hover="switch"] .cxb-b2b-product-card.cxb-b2b-product-card[data-hover-effect="switch"]:hover .cxb-b2b-product-thumbnail img,
.cxb-iq[data-hover="switch"] .cxb-b2b-product-card.cxb-b2b-product-card[data-hover-effect="switch"]:hover .cxb-b2b-product-thumbnail-left img {
    transform: none;
}

/* ==========================================================================
   4. 文本区：行数截断与对齐
   ========================================================================== */

/* 特异度刻意压到 (0,2,0)：需要压过的只有 frontend.css 的
   h6.cxb-b2b-product-title (0,1,1)，而样式页「标题」分组的排版控件是
   {{WRAPPER}} .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-title
   (0,4,0)，必须让它赢——否则用户在面板里改了行高、字号却看不到变化。 */
.cxb-iq .cxb-b2b-product-title {
    display: -webkit-box;
    -webkit-line-clamp: var(--cxb-iq-title-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* 极简悬停式固定两行：这个模板常态只有图和标题，标题行数一变，
   同一行卡片就不再等高，展开面板的偏移量也会算错。 */
.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-title {
    -webkit-line-clamp: 2;
}

.cxb-iq .cxb-b2b-product-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: var(--cxb-iq-excerpt-lines, 2);
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cxb-iq .cxb-b2b-product-excerpt p {
    margin: 0;
}

/* 文字对齐：纯文本走 text-align，弹性行走 --cxb-iq-justify，
   两者由「布局 → 文字对齐」一个控件同时写入。 */
.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-card-price-moq,
.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-specs,
.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-sku,
.cxb-iq .cxb-b2b-product-card .cxb-b2b-product-category,
.cxb-iq .cxb-b2b-product-card .cxb-b2b-button-group {
    justify-content: var(--cxb-iq-justify, flex-start);
}

/* ==========================================================================
   5. 标题标签兼容层
   frontend.css 把标题基础样式写在 h6.cxb-b2b-product-title 上，换成
   H2—H5 / DIV / SPAN 后那条规则选不中，标题会退回主题的默认字号。
   下面补一份与标签无关的等价样式；h6 的情形由原规则接管，两者数值一致，
   谁生效结果都一样。
   ========================================================================== */

/* 同样压到 (0,2,0)/(0,2,1)。标题标签是 h6 时，product-card-ui.css 的
   (0,3,1) 规则接管，数值与这里一致，谁生效都一样；换成别的标签时那条规则
   选不中，由这里兜底；而样式页的排版与颜色控件特异度更高，永远赢。 */
.cxb-iq .cxb-b2b-product-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.01em;
    margin: 0 0 12px;
    color: var(--cxbc-ink-1, #0f172a);
}

.cxb-iq .cxb-b2b-product-title a {
    color: inherit;
    text-decoration: none;
}

/* DIV / SPAN 作标题时浏览器不给块级排版，补上 */
.cxb-iq .cxb-b2b-product-card span.cxb-b2b-product-title {
    display: -webkit-box;
    width: 100%;
}

/* ==========================================================================
   6. 查看更多按钮
   ========================================================================== */

.cxb-iq-more {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}

.cxb-iq-more-link {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid var(--cxbc-accent, var(--cxb-primary-color, #0A7AFF));
    border-radius: 10px;
    background-color: transparent;
    color: var(--cxbc-accent, var(--cxb-primary-color, #0A7AFF));
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cxb-iq-more-link:hover,
.cxb-iq-more-link:focus-visible {
    background-color: var(--cxbc-accent, var(--cxb-primary-color, #0A7AFF));
    color: #fff;
    text-decoration: none;
}

/* ==========================================================================
   7. 左图右文式在窄屏下的处理
   两栏在手机上会把图和文都压得过窄，单列时改成上下堆叠。
   断点取 600px：Elementor 默认的手机断点是 767px，但两列布局的左图右文式
   在 600—767px 之间仍然读得下去，过早堆叠反而浪费横向空间。
   ========================================================================== */

@media screen and (max-width: 600px) {
    .cxb-iq--tpl-left-image .cxb-b2b-product-card.cxb-b2b-product-card-left-image {
        flex-direction: column;
    }

    .cxb-iq--tpl-left-image .cxb-b2b-product-card .cxb-b2b-product-thumbnail-left {
        width: 100%;
        max-width: none;
    }
}

/* ==========================================================================
   8. 可访问性与降级
   ========================================================================== */

/* 系统开启「减少动态效果」时关掉位移、缩放与滤镜过渡，保留颜色变化。
   前庭功能障碍人群对大面积位移敏感，这是 WCAG 2.3.3 的直接要求。 */
@media (prefers-reduced-motion: reduce) {
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:hover,
    .cxb-iq .cxb-b2b-product-card .cxb-b2b-product-thumbnail img,
    .cxb-iq .cxb-b2b-product-card .cxb-b2b-product-thumbnail-left img {
        transition-duration: 0.01ms;
        transform: none;
    }
}

/* Windows 高对比度模式下背景与阴影都会被系统接管，
   给卡片补一圈系统色边框，否则卡片之间没有边界。 */
@media (forced-colors: active) {
    .cxb-iq .cxb-b2b-product-card {
        border: 1px solid CanvasText;
    }
}

/* 不支持 content-visibility 的浏览器忽略第 1 节那条规则即可，无需兜底；
   不支持 aspect-ratio 的浏览器（Safari < 15）回落到固定内边距撑高。 */
@supports not (aspect-ratio: 1 / 1) {
    .cxb-iq .cxb-b2b-product-card .cxb-b2b-product-image-wrapper {
        height: 0;
        padding-bottom: 100%;
    }

    .cxb-iq .cxb-b2b-product-card .cxb-b2b-product-image-wrapper img {
        position: absolute;
        inset: 0;
    }
}

/* ==========================================================================
   9. Elementor 编辑器内的取舍
   编辑器预览里整卡点击被 PHP 关掉了（点一下就跳出编辑器），
   但光标仍是 pointer 会误导，这里改回默认。
   ========================================================================== */

body.elementor-editor-active .cxb-iq .cxb-b2b-product-card:not(.js-product-card) {
    cursor: default;
}


/* ==========================================================================
   10. 窄屏与触控设备的溢出收口

   起因
   ----
   卡片内部唯一会大面积越出卡片边界的元素是极简悬停式的展开面板
   `.cxb-b2b-minimalist-expandable`：它是 position:absolute、
   top: calc(100% - var(--cxb-mh-card-pad-bottom, 16px))、z-index: 20，
   按设计就是要盖在卡片下方的内容上（桌面端悬停时才现形，所以看不出问题）。

   frontend.css 给了两处兜底，让它在触控设备与窄屏回到常规文档流：
     @media (hover: none)                → .cxb-b2b-minimalist-expandable{position:static}
     @media screen and (max-width: 768px) → 同上
   但这两条的选择器只有 (0,1,0)，而且断点写死在 768px。只要出现下面任何一种
   情况，兜底就会失效，面板保持绝对定位并盖住下方组件：

     · 站点把 Elementor 的手机断点调到了 768px 以上（Elementor 允许自定义），
       此时「手机」视图的实际宽度大于 768px，插件的手机规则根本不触发；
     · 设备报告 (hover: hover)（部分安卓机、接了鼠标的平板与二合一设备）
       且视口宽于 768px；
     · 主题或第三方插件在更靠后的位置以 ≥(0,1,0) 的选择器重新声明了
       position，把那条 static 顶掉。

   触屏上还有一层：轻点会让 :hover 粘住直到点击别处，面板于是被点出来并
   一直留在那里——正是「卡片内容压住下方组件」的现场。

   处置
   ----
   下面三条媒体查询各自独立触发（任一命中即可），把面板按常规流处理，
   并把卡片恢复成 overflow:hidden——桌面端本来就是这样，只有极简悬停式为了
   让面板外溢才改成 visible，面板既已回流，就没有再外溢的理由。
   选择器带 .cxb-iq 前缀并重复卡片类名，特异度 (0,4,0) 以上，不依赖加载顺序。
   作用范围限于本小部件，归档页与分类页不受影响。
   ========================================================================== */

@media (hover: none) {
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-minimalist-expandable,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-minimalist-expandable {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        transition: none;
    }

    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover {
        overflow: hidden;
        height: auto;
        filter: none;
        z-index: auto;
        border-bottom-left-radius: var(--cxbc-radius, 12px);
        border-bottom-right-radius: var(--cxbc-radius, 12px);
    }
}

@media (pointer: coarse) {
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-minimalist-expandable,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-minimalist-expandable {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        transition: none;
    }

    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover {
        overflow: hidden;
        height: auto;
        filter: none;
        z-index: auto;
        border-bottom-left-radius: var(--cxbc-radius, 12px);
        border-bottom-right-radius: var(--cxbc-radius, 12px);
    }
}

/* 断点取 1024px 而不是插件的 768px：Elementor 的手机断点可以自定义到
   768—1024px 之间，取上界才能保证「手机」视图一定落在这条规则内。
   平板与桌面用鼠标时，1024px 以上仍然是原来的悬停展开效果，不受影响。 */
@media screen and (max-width: 1024px) {
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-minimalist-expandable,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-minimalist-expandable {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        z-index: auto;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        transition: none;
    }

    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card-minimalist-hidden:hover {
        overflow: hidden;
        height: auto;
        filter: none;
        z-index: auto;
        border-bottom-left-radius: var(--cxbc-radius, 12px);
        border-bottom-right-radius: var(--cxbc-radius, 12px);
    }

    /* 面板回流后，标题不再需要为「固定两行」预留高度：那个预留是为了让
       同一行卡片在面板浮起时高度一致，面板进入常规流后反而只会多出一段空白。 */
    .cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-title {
        min-height: 0;
        margin-bottom: 5px;
    }

    /* 面板里的询盘按钮在桌面端是隐藏的（由图片上的圆形加号代替），
       回流之后应当恢复，否则手机上这张卡片没有任何询盘入口。 */
    .cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card .cxb-b2b-minimalist-expandable .cxb-b2b-product-actions {
        display: block;
    }
}

/* ==========================================================================
   11. 兜底：本小部件的内容一律不越出自己的边框

   上面第 10 节处理的是已知机制。若站点上还有别的第三方样式让卡片内的某个
   元素绝对定位并外溢，下面这条把边界收在卡片自身——桌面端的
   .cxb-b2b-product-card 本来就是 overflow:hidden，这里只是让窄屏与之一致，
   不引入任何新行为。

   只作用于本小部件，且刻意加在卡片而不是 .cxb-iq 上：加在外层会把栅格间隙
   里的卡片投影一并裁掉，加在卡片上则与桌面端完全同构。
   ========================================================================== */

@media screen and (max-width: 1024px) {
    /* 容器自己也裁一次。上一版只裁到卡片，若越界元素的包含块不是卡片
       （第三方样式把它改成了 fixed，或把某个祖先设成了包含块），裁卡片就
       拦不住。overflow:clip 不建立滚动容器，不支持的浏览器回落到 hidden。 */
    .cxb-iq {
        position: relative;
        overflow: hidden;
        overflow: clip;
    }

    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card {
        overflow: hidden;
    }

    /* 图片上的圆形加号按钮有一圈提示气泡要越出缩略图，但它由 frontend.js
       克隆到 body 层显示，裁掉卡片内的那份不影响提示。 */
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card .cxb-b2b-product-thumbnail {
        overflow: hidden;
    }
}


/* ==========================================================================
   12. 极简悬停式的展开面板（.cxb-iq-panel）

   为什么另起一个类名
   ------------------
   插件原来的 .cxb-b2b-minimalist-expandable 默认是
     position: absolute; top: calc(100% - 16px); z-index: 20;
   即默认脱离文档流、盖在卡片下方的内容上，靠 frontend.css 里两条 (0,1,0) 的
   兜底（@media (hover: none) 与 @media screen and (max-width: 768px)）在触控
   与窄屏把它放回常规流。这个默认值是反的：兜底只要有一条不成立——站点改过
   Elementor 的手机断点、设备报告 (hover: hover)、或第三方样式以不低于 (0,1,0)
   的选择器重新声明 position——面板就会盖住下方组件。

   还有一层：触屏上轻点会让 :hover 粘住直到点击别处，面板被点出来后一直留在
   屏幕上，正是「产品卡片内容压住下方组件」的现场。

   这里把默认值翻过来：面板默认在文档流里，任何情况下都不会遮挡；只有确认是
   宽屏 ＋ 真鼠标时才升级成悬停浮层。样式表没加载成功时，退化结果是面板一直
   展开，布局依然正确。

   注意：本节的选择器不含 .cxb-b2b-minimalist-expandable，因此 frontend.css
   针对该类名的全部规则（含那条 absolute）都选不中本小部件的面板。
   ========================================================================== */

/* 默认：常规文档流，与上图下文式的文本区一致 */
.cxb-iq .cxb-iq-panel {
    display: block;
    position: static;
    background-color: inherit;
}

.cxb-iq .cxb-iq-panel .cxb-b2b-product-excerpt,
.cxb-iq .cxb-iq-panel .cxb-b2b-product-features {
    margin-bottom: 5px;
}

.cxb-iq .cxb-iq-panel .cxb-b2b-product-meta {
    margin: 0 0 5px;
    padding-bottom: 0;
}

.cxb-iq .cxb-iq-panel .cxb-b2b-product-actions {
    padding-top: 5px;
    margin-top: 0;
}

/* 面板在流内时，标题不必再为「固定两行」预留高度——那个预留是给浮层形态
   保证同行卡片等高用的，在流内只会多出一段空白。同时把卡片的溢出、投影与
   层叠还原成普通卡片的样子。 */
.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card.cxb-b2b-product-card {
    overflow: hidden;
    filter: none;
}

.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card.cxb-b2b-product-card:hover {
    filter: none;
    z-index: auto;
    border-bottom-color: inherit;
    border-bottom-left-radius: var(--cxbc-radius, 14px);
    border-bottom-right-radius: var(--cxbc-radius, 14px);
}

.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card.cxb-b2b-product-card h6.cxb-b2b-product-title {
    min-height: 0;
    margin-bottom: 5px;
}

.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card .cxb-b2b-product-info {
    flex-grow: 0;
}

/* ------------------------------------------------------------------
   升级成悬停浮层：宽屏 ＋ 真鼠标才启用

   三个条件缺一不可：
     (hover: hover)   设备能真正悬停，不会出现「点一下就粘住」
     (pointer: fine)  主输入是鼠标或触控笔，不是手指
     min-width:1025px 视口宽于插件卡片规则的 768px 断点与 Elementor 可自定义
                      手机断点的上界，确保平板竖屏与手机都不会命中
   ------------------------------------------------------------------ */

@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
    /* 浮层要以卡片为包含块，且卡片必须允许内容外溢 */
    .cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card.cxb-b2b-product-card {
        position: relative;
        overflow: visible;
        /* 浮层的 top 要盖住卡片的下内边距，这里把该值单独记下来，
           样式页改「卡片内边距」时可一并覆盖 */
        --cxb-iq-panel-offset: 16px;
    }

    .cxb-iq .cxb-iq-panel {
        position: absolute;
        left: -1px;
        right: -1px;
        top: calc(100% - var(--cxb-iq-panel-offset, 16px));
        z-index: 20;
        border: 1px solid var(--cxbc-hairline, rgba(15, 23, 42, 0.09));
        border-top: none;
        border-radius: 0 0 var(--cxbc-radius, 14px) var(--cxbc-radius, 14px);
        padding: 12px 16px 16px;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition:
            opacity 0.3s ease-out,
            visibility 0.3s ease-out,
            border-color 0.3s ease-out;
    }

    .cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card:hover .cxb-iq-panel,
    .cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card:focus-within .cxb-iq-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* 浮层形态下恢复原设计：标题占满两行以保证同行卡片等高，
       卡片下缘与浮层连成一体，投影包住「卡片＋浮层」整体轮廓。 */
    .cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card.cxb-b2b-product-card h6.cxb-b2b-product-title {
        min-height: calc(1.3em * 2);
        margin-bottom: 0;
    }

    .cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card.cxb-b2b-product-card:hover {
        border-bottom-color: transparent;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        box-shadow: none;
        filter:
            drop-shadow(0 2px 4px rgba(15, 23, 42, 0.06))
            drop-shadow(0 14px 26px rgba(15, 23, 42, 0.16));
        z-index: 10;
    }

    /* 浮层里的文字询盘按钮由图片上的圆形加号代替，与插件原设计一致 */
    .cxb-iq--tpl-minimalist-hidden .cxb-iq-panel .cxb-b2b-product-actions {
        display: none;
    }
}

/* ==========================================================================
   13. 手机端：关掉两处按模板分叉的新规则，并统一为上图下文式

   现象与证据
   ----------
   实测：产品卡片模板选「极简悬停式」时手机端正常，其余三个选项都重叠。
   翻遍全部样式表，卡片级规则里按「是不是极简悬停式」分叉的只有两处，
   都在 product-card-ui.css，都是 2.1.84 新增的文件（2.1.26 没有这个文件）：

   1. 第 1073 行
        .cxb-b2b-product-card:not(.cxb-b2b-product-card-minimalist-hidden) {
            container-type: inline-size;
            container-name: cxbcard;
        }
      container-type 会隐式施加 contain: layout style inline-size。卡片因此
      变成独立格式化上下文、新的层叠上下文、绝对定位包含块，内联轴尺寸也不
      再参考内容。插件自己清楚这一点——frontend.css 第 8178、8234 行为了保住
      详情页的粘性图集，专门把 contain 和 container-type 强制归零，注释里写
      的就是「都会创建新的包含块」。

   2. 第 148、155、161 行
        ...:not(.cxb-b2b-product-card-minimalist-hidden):hover   { transform: translateY(-4px); ... }
        ...:not(.cxb-b2b-product-card-minimalist-hidden):focus-within { transform: translateY(-2px); ... }
        ...:not(.cxb-b2b-product-card-minimalist-hidden):active  { transform: translateY(-1px); }
      触屏上轻点一张卡片，:hover 会一直粘住到点击别处，同时卡内链接被聚焦
      触发 :focus-within，位移与投影就此定住。transform 同样会创建层叠上下文
      与包含块。

   这两条换来的只是两处字号微调、一处按钮横排和一点悬停反馈，手机端一概用
   不上，桌面端保持不动。
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* 13.1 卡片退回普通块级元素：不做查询容器，不做包含块，不做层叠上下文 */
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card {
        container-type: normal;
        contain: none;
    }

    /* 13.2 关掉粘滞悬停带来的位移。投影退回常态那一档，
       保留按下时的轻微反馈由 JS 层负责，这里不再位移。 */
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:hover,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:focus-within,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:active {
        transform: none;
        box-shadow: var(--cxbc-elev-1, 0 1px 3px rgba(15, 23, 42, 0.06));
    }

    /* 图片放大同样关掉：触屏没有「移开鼠标」这个动作，放大后不会复原 */
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail img,
    .cxb-iq .cxb-b2b-product-card.cxb-b2b-product-card:hover .cxb-b2b-product-thumbnail-left img {
        transform: none;
    }

    /* ------------------------------------------------------------------
       13.3 统一为上图下文式

       由「显示 → 手机端统一用上图下文式」开关控制（默认开启），
       开启时包裹层带 .cxb-iq--mobile-unify。
       手机屏幕放不下左图右文式的两栏；极简悬停式的悬停展开在触屏上没有
       意义。两者在手机端都退化成上图下文式，桌面与平板不受影响。
       ------------------------------------------------------------------ */

    /* 左图右文式：两栏改上下堆叠，图片占满整行 */
    .cxb-iq--mobile-unify.cxb-iq--tpl-left-image .cxb-b2b-product-card.cxb-b2b-product-card-left-image {
        flex-direction: column;
        gap: 0;
    }

    .cxb-iq--mobile-unify.cxb-iq--tpl-left-image .cxb-b2b-product-card .cxb-b2b-product-thumbnail-left {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        margin: 0;
        aspect-ratio: var(--cxb-iq-ratio, 1 / 1);
        display: block;
        border-radius: calc(var(--cxbc-radius, 12px) - 1px) calc(var(--cxbc-radius, 12px) - 1px) 0 0;
        overflow: hidden;
    }

    .cxb-iq--mobile-unify.cxb-iq--tpl-left-image .cxb-b2b-product-card .cxb-b2b-product-content-left {
        width: 100%;
        flex: 1 1 auto;
        padding-top: 10px;
    }

    /* 左图右文式的文本行数在窄屏被压到 1 行，堆叠后空间足够，
       交还给「显示」分组里的行数设置 */
    .cxb-iq--mobile-unify.cxb-iq--tpl-left-image .cxb-b2b-product-card .cxb-b2b-product-content-left .cxb-b2b-product-title {
        -webkit-line-clamp: var(--cxb-iq-title-lines, 2);
    }

    .cxb-iq--mobile-unify.cxb-iq--tpl-left-image .cxb-b2b-product-card .cxb-b2b-product-content-left .cxb-b2b-product-excerpt {
        -webkit-line-clamp: var(--cxb-iq-excerpt-lines, 2);
    }

    /* 左图右文式的按钮在窄屏改为整宽，与上图下文式一致 */
    .cxb-iq--mobile-unify.cxb-iq--tpl-left-image .cxb-b2b-product-card .cxb-b2b-product-content-left .cxb-b2b-product-actions,
    .cxb-iq--mobile-unify.cxb-iq--tpl-left-image .cxb-b2b-product-card .cxb-b2b-product-content-left .cxb-b2b-button-group {
        width: 100%;
        align-items: stretch;
        justify-content: var(--cxb-iq-justify, flex-start);
    }

    /* 极简悬停式：面板已在文档流内（第 12 节），这里补齐与上图下文式一致的
       标题间距与信息区伸展，观感就完全一样了 */
    .cxb-iq--mobile-unify.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card .cxb-b2b-product-info {
        flex-grow: 1;
    }

    .cxb-iq--mobile-unify.cxb-iq--tpl-minimalist-hidden .cxb-b2b-product-card .cxb-iq-panel {
        padding: 0;
    }
}