/* =========================================================
   5/5 · 模块层 modules/cart.css —— 询价车（购物车式多商品询价）
   ---------------------------------------------------------
   为什么在 modules/ 而不是 pages/：
     询价车**不属于任何一个页面**。头部的「询价单」入口和右侧抽屉
     写在 partials/header.htm 里，也就是说**每个页面都有它**。
     放进 pages/ 会变成「只有询价单页有样式、其他页面的抽屉裸奔」。

   正因为全站都在用，本文件被列进 theme.json 的 styles.base。

   类名前缀：.cart-*（本模块内所有类都必须带它）
     头部入口   .cart-link / .cart-badge / .cart-fly
     抽屉       .cart-drawer / .cart-panel / .cart-body / .cart-foot …
     抽屉内单行 .cart-row / .cart-line / .cart-thumb / .cart-qty-box / .cart-del
     询价单页   .cart-card / .cart-list / .cart-item-* / .cart-actions
     询价摘要   .cart-sublist（询盘页顶部「已加入询价单」）
     抽屉内表单 .cart-inq-*（字段组件 .field / .req 在 inquiry 模块）

   ⚠️ 1.9.x 修过的两个坑，改这块前先看一眼：
      ① .cart-tip 曾经一名两用（抽屉的绿色提示条 + 详情页按钮里的行内小字），
         而抽屉那条 height:0，于是详情页的小字被压成零高、永远看不见。
         现已拆成 .cart-drawer-tip（抽屉）与 .cart-btn-tip（按钮内）。
      ② .cart-fly / .cart-badge.pop 在减少动效偏好下必须关掉，否则有人会晕。
   ========================================================= */

/* ===================== 头部入口（1.8.0） ===================== */

.cart-link {
    position: relative; display: inline-flex; align-items: center; gap: 7px;
    flex: 0 0 auto; white-space: nowrap; text-decoration: none;
    /* ⚠️ 头部是深底通栏，这里必须用浅色 —— 跟 .search / .langs 一样，
       用 var(--ink)（深色文字）会整块看不见。 */
    color: rgba(255, 255, 255, .82); font-size: 14.5px;
    transition: color .2s;
    /* 头部入口是 <button>，去掉浏览器默认边框 */
    border: 0; background: none; cursor: pointer; font-family: inherit;
}
.cart-link:hover { color: #fff; }
.cart-ico {
    width: 20px; height: 20px; display: inline-block; position: relative; flex: 0 0 auto;
}
/* ⚠️ 下面两个伪元素是**用物理坐标画的购物车图形**（车身 / 提手 + 轮子）。
   它们是图案，不是版式 —— RTL 下**刻意不镜像**：全世界的购物车图标都朝同一方向，
   镜像过去反而像坏了。做 RTL 时不要顺手把它们改成 inset-inline-*。 */
.cart-ico::before {            /* 车身 */
    content: ''; position: absolute; left: 0; bottom: 3px;
    width: 15px; height: 10px; border: 2px solid currentColor; border-top: 0;
    border-radius: 0 0 3px 3px;
}
.cart-ico::after {             /* 提手 + 两个轮子 */
    content: ''; position: absolute; left: 4px; top: 1px;
    width: 8px; height: 7px; border: 2px solid currentColor; border-bottom: 0;
    border-radius: 4px 4px 0 0;
    box-shadow: 3px 9px 0 -1px currentColor, 11px 9px 0 -1px currentColor;
}
.cart-badge {
    min-width: 19px; height: 19px; padding: 0 5px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue); color: #fff;
    font-size: 11.5px; font-weight: 700; line-height: 1;
    border-radius: 10px;
}
/* 加购后角标弹一下（配合 .cart-fly 飞过来的小数字） */
.cart-badge.pop { animation: cartBadgePop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes cartBadgePop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.45); }
    100% { transform: scale(1); }
}
/* 飞行中的「+1」小圆点（位置由 JS 按按钮/角标坐标算好后内联） */
.cart-fly {
    position: fixed; z-index: 1400;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 1;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(var(--shadow-color), .28);
}
@media (prefers-reduced-motion: reduce) {
    .cart-fly { display: none; }
    .cart-badge.pop { animation: none; }
}
/* 头部空间紧张时先藏文字，图标+角标还在 */
@media (max-width: 1180px) { .cart-txt { display: none; } }

/* ===================== 询价单页（1.8.0） ===================== */

.cart-card {
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 6px 24px rgba(16, 34, 60, .05);
    padding: 24px 26px;
}
.cart-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-wrap: wrap; margin-bottom: 6px;
}
.cart-card-head h2 { font-size: 22px; }
/* 标题右侧的「共 N 个型号 · M 件」小字 */
.cart-card-sub { font-size: 13px; font-weight: 400; color: var(--muted); }
/* 第二张卡（询价单页底部「下一步」提示） */
.cart-card-next { margin-top: 20px; }
.cart-card-next p { margin: 0; color: var(--muted); }

.cart-list { border-top: 1px solid var(--line-soft); }
.cart-item {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 16px 0; border-bottom: 1px solid var(--line-soft);
}
.cart-item-img {
    width: 84px; height: 84px; flex: 0 0 auto; overflow: hidden;
    border: 1px solid var(--line-soft); border-radius: 8px; background: var(--surface-2);
    display: flex; align-items: center; justify-content: center;
}
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-noimg { font-size: 12px; color: var(--muted); }
.cart-item-main { flex: 1; min-width: 0; }
.cart-item-title { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.cart-item-title:hover { color: var(--primary); }
.cart-item-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.cart-item-main input[type=text] { width: 100%; max-width: 420px; }
.cart-item-qty { flex: 0 0 auto; text-align: center; }
.cart-item-qty label { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.cart-item-qty input { width: 78px; text-align: center; }
.cart-item-ops { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }

.cart-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.cart-page-empty { text-align: center; padding: 60px 20px; }
.cart-page-empty .t { font-size: 17px; margin: 0 0 8px; }
.cart-page-empty .d { color: var(--muted); margin: 0 0 22px; }

/* ===== 询价摘要：询盘页顶部「已加入询价单」（提交表单上方） ===== */
.cart-sublist {
    margin: 0 0 20px; padding: 14px 16px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px;
}
.cart-sublist-h {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: 14px; font-weight: 600; margin-bottom: 8px;
}
.cart-sublist-h a { margin-inline-start: auto; font-size: 13px; font-weight: 400; }
.cart-sublist ul { list-style: none; margin: 0; padding: 0; }
.cart-sublist li {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    font-size: 13px; color: var(--muted); padding: 3px 0;
}
.cart-sublist-model { font-size: 12px; color: var(--muted-2); }
.cart-sublist-qty { margin-inline-start: auto; font-weight: 600; color: var(--ink); }

/* ===================== 询价车抽屉（1.8.4） ===================== */
body.cart-open { overflow: hidden; }

.cart-drawer {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(10, 26, 47, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
}
.cart-drawer.on { opacity: 1; visibility: visible; }

.cart-panel {
    /* 抽屉贴「行尾」侧：RTL 语言下自动从左边滑出（跟阅读方向一致） */
    position: absolute; top: 0; inset-inline-end: 0; bottom: 0;
    /* 1.9.3：420 → 460。行内多了一个「删除键 + 标题」和「备注 + 步进器」两段，
     * 420px 下备注框只剩 ~200px，placeholder「规格要求（可选）」都放不下。 */
    width: min(460px, 94vw);
    display: flex; flex-direction: column;
    background: #fff;
    box-shadow: -18px 0 50px rgba(10, 26, 47, .18);
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.cart-drawer.on .cart-panel { transform: none; }

/* ⚠️ transform / box-shadow **没有逻辑属性**，只能用 [dir="rtl"] 选择器手工镜像 ——
   这是 RTL 改造里唯一必须写方向选择器的地方，别处一律用逻辑属性。
   少了这一段会静默走样：抽屉已经贴到左边，收起态却仍向右平移 100%
   ——「关上」的方向反而是往画面里钻，动画看着像卡住，
   关完后屏幕右侧还会留一条阴影残影。 */
[dir="rtl"] .cart-panel {
    transform: translateX(-100%);
    box-shadow: 18px 0 50px rgba(10, 26, 47, .18);
}

.cart-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--line);
    font-size: 16px;
}
.cart-close {
    border: 0; background: none; font-size: 24px; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 0 4px; border-radius: 6px;
}
.cart-close:hover { background: var(--soft); color: var(--ink); }

/* 抽屉顶部绿色提示条（成功/失败都从这里冒一句） */
.cart-drawer-tip {
    height: 0; overflow: hidden; text-align: center;
    font-size: 12.5px; color: #fff; background: #16a34a;
    transition: height .18s ease;
}
.cart-drawer-tip.on { height: 26px; line-height: 26px; }

.cart-body { flex: 1; overflow: auto; padding: 4px 22px; }
.cart-loading, .cart-empty { padding: 48px 0; text-align: center; color: var(--muted); }

/* ===== 询价单行（1.9.3 重排）=====
 * 原布局：thumb + info(标题/备注) | ops(数量框 + × 竖排)
 *   → 中间大片留白、× 孤零零吊在右下，短名时尤其散；
 *   → 长名会把 info 撑开、把 ops 顶出可视区。
 * 现布局：两行制 —— 上行「缩略图 + 标题(≤2行截断) + 删除键」，
 *          下行「备注框 + 数量步进器」通栏。
 *   数量和删除都在标题右侧/下一行的固定位置，名字再长也只吃自己那行的空间。 */
.cart-row {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.cart-line { display: flex; align-items: flex-start; gap: 12px; }
/* 缩进从 84px 收到 4px：原本是为了跟缩略图左对齐，但在 460px 面板里
 * 白白吃掉 76px，备注框只剩 ~230px、placeholder 都要截断。
 * 现在让第二行通栏，可读性比对齐更重要。 */
.cart-line2 { display: flex; align-items: center; gap: 10px; margin: 10px 0 0 4px; }

.cart-thumb {
    position: relative; flex: 0 0 auto;
    /* 72 → 64：标题占两行时 72px 的图会把整行撑高，三行并排看下来参差不齐。
     * 64px 仍足够认出型号，又能让两行标题与图基本齐平。 */
    width: 64px; height: 64px; overflow: hidden;
    border: 1px solid var(--line); border-radius: 10px; background: var(--soft);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-in;
}
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
/* 电脑端：悬停轻微放大 + 提示可点开大图 */
@media (hover: hover) and (min-width: 821px) {
    .cart-thumb:hover img { transform: scale(1.12); }
    .cart-thumb::after {
        content: attr(data-lb-hint); position: absolute; inset: auto 0 0 0;
        background: rgba(10, 26, 47, .62); color: #fff;
        font-size: 11px; text-align: center; line-height: 20px;
        opacity: 0; transition: opacity .2s;
    }
    .cart-thumb:hover::after { opacity: 1; }
}
.cart-thumb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cart-noimg { font-size: 11.5px; color: var(--muted); }
/* 图裂后的占位：JS 会摘掉 <img> 并加这个类，避免浏览器默认的破图标。
 * ⚠️ .cart-thumb 是 flex 容器，::before 作为 flex item 会只占内容宽、
 *    再被 align-items 顶到中间 —— 文字看着偏上。这里让它 position:absolute
 *    铺满整块，flex 居中就落在真正的几何中心。 */
.cart-thumb.is-noimg { cursor: default; position: relative; }
.cart-thumb.is-noimg::before {
    content: '无图'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11.5px; color: var(--muted-2);
}

.cart-info { flex: 1; min-width: 0; }
/* 标题行：名字占满剩余宽度，删除键固定在最右，不被长名挤走 */
.cart-head-row { display: flex; align-items: flex-start; gap: 10px; }
.cart-name {
    flex: 1; min-width: 0;
    font-size: 14px; font-weight: 600; color: var(--ink);
    line-height: 1.45;
    /* 长名最多两行，超出省略 —— 这是「长产品名不会顶歪布局」的关键。
     * 没有它，flex 子项虽不会横向溢出，但会把整行撑得极高、右侧视觉失衡。 */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-word;
}
.cart-name:hover { color: var(--blue); }

.cart-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 4px; }
.cart-note {
    flex: 1; min-width: 0;
    padding: 7px 10px; font-size: 12.5px;
    border: 1px solid var(--line); border-radius: 8px; background: var(--soft);
}
.cart-note:focus { outline: none; border-color: var(--blue); background: #fff; }

/* 数量步进器：[- 1 +] 一体，取代原来孤零零的数字框 */
.cart-qty-box {
    flex: 0 0 auto;
    display: inline-flex; align-items: stretch;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--soft); overflow: hidden;
}
.cart-qty-box:focus-within { border-color: var(--blue); background: #fff; }
.cart-qty-btn {
    width: 28px; border: 0; background: none; cursor: pointer;
    color: var(--muted); font-size: 15px; line-height: 1;
    font-family: inherit; transition: background .15s, color .15s;
}
.cart-qty-btn:hover { background: #e8eef8; color: var(--primary); }
.cart-qty {
    width: 42px; border: 0; background: none; text-align: center;
    font-size: 13px; padding: 7px 0; color: var(--ink);
    -moz-appearance: textfield;
}
.cart-qty:focus { outline: none; }
.cart-qty::-webkit-outer-spin-button,
.cart-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 删除键：跟标题同一行的右上角，24px 见方，不抢视线 */
.cart-del {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 7px; cursor: pointer;
    background: transparent; color: var(--muted-2);
    transition: background .15s, color .15s;
}
/* 悬停才显出底色：平时安静，鼠标移上去才提示「这能点」 */
.cart-del:hover { background: #fee2e2; color: #dc2626; }
.cart-del:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }

/* 窄屏：备注框与步进器换行，避免挤成一条缝 */
@media (max-width: 420px) {
    .cart-line2 { flex-wrap: wrap; margin-inline-start: 0; }
    .cart-note { flex: 1 1 100%; }
}

.cart-foot {
    border-top: 1px solid var(--line); padding: 14px 20px 18px;
    background: #fff;
}
.cart-sum { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.cart-sum b { color: var(--ink); }
.cart-btns { display: flex; gap: 10px; }
/* flex:1 + nowrap：按钮文字是长句（"填写联系方式并提交"），默认可缩会折成两行 */
.cart-btns .btn { flex: 1 1 auto; text-align: center; white-space: nowrap; padding-left: 10px; padding-right: 10px; }

/* 详情页「加入询价单」按钮上闪一下的小字（由 JS 写入，1.8.5） */
.cart-btn-tip { font-size: 13px; font-weight: 600; }

@media (max-width: 640px) {
    .cart-panel { width: 100vw; }
    .cart-item { flex-wrap: wrap; }
    .cart-item-main { flex: 1 1 100%; order: 3; }
    .cart-item-ops { flex-direction: row; }
    .cart-txt { display: none; }
}

/* ===== 抽屉内的联系方式表单（1.9.1：不跳页，在抽屉里填完直接提交）===== */
.cart-inq {
    margin-top: 14px; padding-top: 14px;
    border-top: 1px solid var(--line);
}
.cart-inq[hidden] { display: none; }   /* 浏览器默认对 hidden 表单不生效，需显式兜底 */
.cart-inq-h {
    font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px;
}
.cart-inq .field { margin-bottom: 11px; }
.cart-inq .field label {
    display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 4px;
}
.cart-inq input[type=text],
.cart-inq input[type=email],
.cart-inq input[type=tel],
.cart-inq textarea,
.cart-inq select {
    width: 100%; padding: 7px 10px; font-size: 13.5px;
    border: 1px solid var(--line); border-radius: 7px;
    background: #fff; color: var(--ink);
}
.cart-inq textarea { resize: vertical; min-height: 68px; }
.cart-inq .cap-row { display: flex; gap: 8px; align-items: stretch; }
.cart-inq .cap-row input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: 2px; }
.cart-inq .cap-img {
    width: 100px; height: 38px; flex: 0 0 auto; cursor: pointer;
    border: 1px solid var(--line); border-radius: 7px; background: #f6f8fb;
}
.cart-inq-tip { font-size: 13px; color: var(--muted); line-height: 1.8; }
.cart-inq-ops { display: flex; gap: 9px; margin-top: 14px; }
.cart-inq-ops .btn { flex: 1; text-align: center; white-space: nowrap; }
.cart-inq-ops .btn.small { flex: 0 0 auto; }