/* 公开目录 /catalog 和商品页 /p/货号 的样式。和首页第一屏同一套:浅灰底、深蓝黑、白色大圆角卡片、圆角按钮、字重 900 大标题 */
* { box-sizing: border-box; }
html { background: var(--bg, #eeeef0); -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; color: var(--ink, #1d1d1f); --pad: clamp(18px, 4vw, 64px); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent, #7b2fd1); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--accent, #7b2fd1); color: #fff; }

.nav { display: flex; align-items: center; justify-content: space-between; height: 84px; padding: 0 var(--pad); font-weight: 500; }
.nav .logo { font-size: 22px; font-weight: 800; letter-spacing: .06em; text-decoration: none; }
.nav nav { display: flex; gap: 40px; }
.nav nav a { text-decoration: none; } .nav nav a:hover { text-decoration: underline; }
.nav .in { display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 12px; background: var(--pri, #1d1d1f); color: #fff; font-weight: 600; text-decoration: none; }

main { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad) 96px; }
h1, h2 { margin: 0; font-weight: 900; letter-spacing: -.02em; line-height: 1.12; text-wrap: balance; }
.sub { margin: 12px 0 0; color: var(--mute, #606061); }

.btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border: 0; border-radius: 14px; background: var(--pri, #1d1d1f); color: #fff; font: inherit; font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background-color .15s, transform .1s; }
.btn:hover { background: var(--ink2, #2c2c2d); } .btn:active { transform: scale(.97); }
.btn.ghost { background: var(--card, #fff); color: var(--ink, #1d1d1f); box-shadow: 0 1px 2px rgba(29,29,31,.06); } .btn.ghost:hover { background: var(--field, #f6f6f9); }

/* ---------- 目录 ---------- */
.head { padding: clamp(20px, 5vh, 56px) 0 clamp(20px, 3vh, 32px); }
.head h1 { font-size: clamp(32px, 5vw, 72px); }
/* 「‹ 返回」:标题上面一行,按钮大小够手指点 */
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: 0 0 clamp(6px, 1.5vh, 14px); margin-inline-start: -10px; padding: 0 14px 0 10px;
  border-radius: 12px; color: var(--mute, #606061); font-weight: 500; text-decoration: none; transition: background .15s, color .15s; }
.back:hover { color: var(--ink, #1d1d1f); background: rgba(29,29,31,.06); }
[dir="rtl"] .back svg { transform: scaleX(-1); }
.find { display: flex; gap: 10px; max-width: 820px; margin-top: clamp(20px, 3vh, 32px); padding: 10px; border-radius: 22px; background: var(--card, #fff); border: 1px solid var(--line, #e7e7e9); box-shadow: 0 1px 2px rgba(29,29,31,.04), 0 18px 50px rgba(29,29,31,.08); }
.find input { flex: 1; min-width: 0; height: 54px; padding: 0 18px; border: 1px solid var(--line, #e4e4e6); border-radius: 14px; background: var(--field, #f4f4f7); font: inherit; font-size: 17px; color: inherit; }
.find button { height: 54px; padding: 0 28px; border: 0; border-radius: 14px; background: var(--pri, #1d1d1f); color: #fff; font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.tabs { display: flex; gap: 8px; }
.tabs a, .chip { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 22px; background: var(--card, #fff); font-weight: 600; text-decoration: none; box-shadow: 0 1px 2px rgba(29,29,31,.06); }
.tabs a.on { background: var(--pri, #1d1d1f); color: #fff; }
.chip { background: var(--field, #ededf0); color: var(--ink, #1d1d1f); box-shadow: none; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: clamp(10px, 1.2vw, 18px); }
.card { display: flex; flex-direction: column; border-radius: 22px; background: var(--card, #fff); border: 1px solid var(--line, #e7e7e9); overflow: hidden; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(29,29,31,.12); }
.card .pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--card, #fff); }
.card .pic img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.noimg { color: #9f9fa0; font-size: 14px; }
.card .t { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px 18px; border-top: 1px solid var(--field, #efeff1); }
.card b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.card span { font-size: 14px; color: var(--mute, #606061); }
.card .mk { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.card em { margin-top: 8px; font-style: normal; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.empty { grid-column: 1 / -1; padding: clamp(32px, 6vh, 72px) clamp(20px, 4vw, 56px); border-radius: 28px; background: var(--card, #fff); border: 1px solid var(--line, #e7e7e9); }
.empty h2 { font-size: clamp(24px, 2.6vw, 38px); } .empty p { max-width: 36em; color: var(--ink2, #4f4f50); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 28px; color: var(--mute, #606061); font-variant-numeric: tabular-nums; }

/* ---------- 商品页 ---------- */
.crumb { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0 20px; font-size: 14px; color: var(--mute, #6f6f70); }
.crumb a { text-decoration: none; } .crumb a:hover { text-decoration: underline; } .crumb b { color: var(--ink, #1d1d1f); }
.prod { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.prod .pic { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: clamp(16px, 3vw, 48px); border-radius: 28px; background: var(--card, #fff); border: 1px solid var(--line, #e7e7e9); box-shadow: 0 1px 2px rgba(29,29,31,.04), 0 18px 50px rgba(29,29,31,.08); }
.prod .pic { position: relative; } .prod .pic img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.kind { margin: 0 0 8px; color: var(--mute, #606061); }
.prod h1 { font-size: clamp(44px, 6vw, 92px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: clamp(16px, 2.6vh, 28px); }
.price b { font-size: clamp(30px, 3.2vw, 46px); font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.price span { color: var(--mute, #606061); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3vh, 30px); }
.note { margin: 14px 0 0; font-size: 14px; color: var(--mute, #6f6f70); }
.spec { margin: clamp(24px, 4vh, 40px) 0 0; border-top: 2px solid var(--ink, #1d1d1f); }
.spec div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line, #dbdbdd); }
.spec dt { color: var(--mute, #606061); } .spec dd { margin: 0; overflow-wrap: anywhere; }
.fit { margin-top: clamp(48px, 8vh, 96px); }
.fit h2 { font-size: clamp(28px, 3.4vw, 52px); }
.fit .sub { margin-bottom: clamp(18px, 3vh, 28px); max-width: 44em; }
.fit details { margin-top: 10px; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line, #e7e7e9); }
.fit summary { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 22px; cursor: pointer; list-style: none; }
.fit summary::-webkit-details-marker { display: none; }
.fit summary b { font-size: 18px; } .fit summary span { font-size: 14px; color: var(--mute, #606061); }
.fit summary span::after { content: "  +"; font-weight: 700; color: var(--ink, #1d1d1f); } .fit details[open] summary span::after { content: "  −"; }
.fit ul { margin: 0; padding: 4px 22px 18px; list-style: none; columns: 2; column-gap: 40px; font-size: 15px; color: var(--ink2, #303031); }
.fit li { padding: 6px 0; border-top: 1px solid var(--field, #efeff1); break-inside: avoid; }

/* ---------- 按车型找:品牌格子、车型和年款的选择条 ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.tiles a { display: flex; flex-direction: column; gap: 2px; padding: 16px 20px; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line, #e7e7e9); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.tiles a:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(29,29,31,.12); }
.tiles b { font-size: 18px; font-weight: 800; } .tiles span { font-size: 14px; color: var(--mute, #606061); }
.pick { margin-top: 14px; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line, #e7e7e9); }
.pick summary { padding: 14px 20px; font-weight: 600; cursor: pointer; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 2px 20px 18px; max-height: 320px; overflow: auto; }
.chips a { padding: 7px 14px; border-radius: 999px; background: var(--field, #f1f1f3); font-size: 14.5px; text-decoration: none; }
.chips a:hover { background: var(--line, #e7e7e9); } .chips a.on { background: var(--pri, #1d1d1f); color: #fff; }
.fit .more { margin: 0; padding: 0 22px 18px; font-size: 15px; font-weight: 600; }

.ft { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 28px; padding: 40px var(--pad); border-radius: 28px 28px 0 0; background: var(--dark, #1d1d1f); color: #c7c7c8; font-size: 15px; }
.ft b { color: #fff; font-weight: 900; letter-spacing: .02em; } .ft a { margin-right: 22px; color: #e5e5e7; text-decoration: none; } .ft a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .nav { height: 64px; } .nav nav { display: none; } .nav .in { height: 40px; padding: 0 16px; font-size: 15px; }
  main { padding-bottom: 64px; }
  .find { padding: 8px; border-radius: 18px; } .find input, .find button { height: 50px; } .find button { padding: 0 20px; }
  .tabs a, .chip { height: 40px; padding: 0 16px; }
  .grid { grid-template-columns: 1fr 1fr; }
  .card { border-radius: 18px; } .card .t { padding: 12px 14px 14px; } .card b { font-size: 18px; } .card em { font-size: 16px; }
  .prod { grid-template-columns: 1fr; } .prod .pic { border-radius: 22px; }
  .cta .btn { flex: 1; padding: 0 16px; }
  .spec div { grid-template-columns: 7.5em 1fr; }
  .fit ul { columns: 1; }
  .ft { border-radius: 22px 22px 0 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* 价格的颜色跟配色方案走(没选方案时就是文字的颜色) */
.card em, .price b { color: var(--price, inherit); }

/* 标志用图片 */
.nav .logo { display: block; line-height: 0; } .nav .logo img { display: block; height: 30px; width: auto; }
.ft b { line-height: 0; } .ft b img { display: block; height: 27px; width: auto; }
@media (max-width: 800px) { .nav .logo img { height: 23px; } }

/* 商品页:每个品牌下面的车型链接;规格表里可点的编号 */
.fit .more { display: flex; flex-wrap: wrap; gap: 8px 18px; } .fit .more a { color: var(--ink, #1d1d1f); text-underline-offset: 3px; }
.spec dd a { color: inherit; text-decoration-color: var(--line, #ccc); text-underline-offset: 3px; } .spec dd a:hover { text-decoration-color: currentColor; }

/* ---------- 语言切换(导航右边) ---------- */
.nav-r { display: flex; align-items: center; gap: 18px; }
.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(29,29,31,.06); font-size: 13px; font-weight: 600; }
.langs a { padding: 5px 10px; border-radius: 999px; text-decoration: none; color: var(--mute, #606061); }
.langs a.on { background: var(--card, #fff); color: var(--ink, #1d1d1f); box-shadow: 0 1px 2px rgba(29,29,31,.1); }
.nav .in { position: relative; white-space: nowrap; }
.nav .in i { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 8px; padding: 0 6px; border-radius: 11px; background: var(--add, #b6862c); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; }

/* ---------- 国际站:格子上的加号、询价单 ---------- */
.card.q { position: relative; } .card .cl { display: flex; flex-direction: column; flex: 1; color: inherit; text-decoration: none; }
.card.q .t { padding-bottom: 22px; } .card.q .mk { padding-right: 52px; }
.addq { position: absolute; right: 14px; bottom: 14px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--add, #b6862c); color: var(--add-ink, #fff); font: 400 26px/1 Arial, sans-serif; padding: 0 0 2px; cursor: pointer; transition: transform .1s, background-color .15s; }
.addq:hover { filter: brightness(.94); } .addq:active { transform: scale(.92); }
.addq.on { background: var(--pri, #1d1d1f); color: #fff; font-size: 19px; padding: 0; }
.btn.on { background: var(--add, #b6862c); }
button.btn { font-family: inherit; }
.inq { max-width: 860px; }
.inq-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 40px; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line, #e4e4e6); }
.inq-row:first-child { border-top: 2px solid var(--ink, #1d1d1f); }
.inq-pic { display: block; aspect-ratio: 4 / 3; border-radius: 10px; background: var(--card, #fff); border: 1px solid var(--line, #e4e4e6); overflow: hidden; }
.inq-pic img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.inq-t a { display: block; font-size: 20px; font-weight: 800; color: inherit; text-decoration: none; } .inq-t a:hover { text-decoration: underline; }
.inq-t span { display: block; font-size: 14px; color: var(--mute, #606061); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inq-q { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mute, #606061); }
.inq-q input { width: 84px; height: 44px; padding: 0 10px; border: 1px solid var(--line, #d0d0d2); border-radius: 10px; background: var(--card, #fff); font: inherit; font-size: 17px; font-weight: 600; color: var(--ink, #1d1d1f); text-align: center; }
.inq-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 24px; line-height: 1; color: var(--mute, #606061); cursor: pointer; } .inq-x:hover { background: rgba(29,29,31,.07); }
.inq-empty { padding: 28px 0; font-size: 18px; color: var(--mute, #606061); }
.inq-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin-top: 28px; padding: clamp(18px, 3vw, 32px); border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line, #e4e4e6); }
.inq-form[hidden] { display: none; }
.fld span { display: block; margin-bottom: 6px; font-size: 14px; color: var(--mute, #606061); }
.fld input, .fld textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--line, #d0d0d2); border-radius: 10px; background: var(--field, #f6f6f8); font: inherit; color: var(--ink, #1d1d1f); }
.fld input { height: 50px; } .fld.wide, .inq-err, .inq-form .btn { grid-column: 1 / -1; }
.inq-form .btn { justify-self: start; border: 0; cursor: pointer; }
.inq-form .btn:disabled { opacity: .6; cursor: default; }
.inq-err { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fbe9ea; color: #7d1218; }
.inq-more { margin-top: 18px; color: var(--mute, #606061); } .inq-more a { color: var(--ink, #1d1d1f); }
.inq-done { padding: clamp(28px, 5vw, 56px); border-radius: 22px; background: var(--card, #fff); border: 1px solid var(--line, #e4e4e6); }
.inq-done h2 { font-size: clamp(26px, 3vw, 40px); }
@media (max-width: 800px) {
  .nav { flex-wrap: wrap; height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; gap: 10px; } .nav-r { gap: 8px; margin-left: auto; } .nav .in { padding: 0 12px; font-size: 14px; }
  .inq-row { grid-template-columns: 72px minmax(0, 1fr) 36px; gap: 10px 12px; } .inq-q { grid-column: 2 / -1; } .inq-x { grid-row: 1; grid-column: 3; }
  .inq-form { grid-template-columns: 1fr; } .inq-form .btn { justify-self: stretch; }
}

.nav-r details.lang > summary { height: 38px; }

/* ================= 从右往左的语言(阿拉伯语、波斯语、希伯来语) =================
   <html dir="rtl"> 之后,横排的东西(导航、标签、表单、格子)浏览器会自动镜像;下面只补写死了「左 / 右」的地方。货号、尺寸、编号仍然从左往右。 */
[dir="rtl"] body { text-align: right; }
[dir="rtl"] .addq { right: auto; left: 14px; } [dir="rtl"] .card.q .mk { padding-right: 0; padding-left: 52px; }
@media (max-width: 800px) { [dir="rtl"] .nav-r { margin-left: 0; margin-right: auto; } }
[dir="rtl"] .nav .in i { margin: 0 8px 0 0; }
[dir="rtl"] .fit summary span::after { content: "+  "; } [dir="rtl"] .fit details[open] summary span::after { content: "−  "; }
[dir="rtl"] .ft a { margin: 0 0 0 22px; } [dir="rtl"] .langs a { direction: ltr; }
[dir="rtl"] .card b, [dir="rtl"] .prod h1, [dir="rtl"] .inq-t a, [dir="rtl"] .spec dd, [dir="rtl"] .fit li, [dir="rtl"] .card .mk, [dir="rtl"] .tiles b, [dir="rtl"] .chips a { direction: ltr; unicode-bidi: isolate; text-align: right; }   /* 货号、编号、车型名是拉丁字母:保持从左往右,但靠右对齐 */
[dir="rtl"] .inq-q input { direction: ltr; } [dir="rtl"] .find input, [dir="rtl"] .fld input, [dir="rtl"] .fld textarea { text-align: right; }
[dir="rtl"] .fld input[type="email"], [dir="rtl"] .fld input[type="tel"] { direction: ltr; text-align: right; }
.nav-r .flag { margin: 0; }

/* ---------- 回首页的按钮(导航右边;手机上只留图标) ---------- */
.nav .home { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1.5px solid var(--ink, #1d1d1f); border-radius: 12px; background: var(--card, #fff); color: var(--ink, #1d1d1f); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; box-shadow: 0 1px 2px rgba(29,29,31,.08), 0 4px 12px rgba(29,29,31,.06); transition: box-shadow .15s, transform .1s; }
.nav .home:hover { box-shadow: 0 1px 2px rgba(29,29,31,.1), 0 8px 20px rgba(29,29,31,.12); } .nav .home:active { transform: scale(.97); } .nav .home svg { flex: none; }
@media (max-width: 800px) { .nav .home { width: 40px; padding: 0; justify-content: center; } .nav .home span { display: none; } }

/* ---------- 长语言的排版:筛选按钮不折行(一行放不下就横滑)、编号不在横杠处断开、手机上商品页按钮纵向铺满 ---------- */
.tabs { overflow-x: auto; scrollbar-width: none; max-width: 100%; } .tabs a, .chip { white-space: nowrap; flex: none; }
.ref { white-space: nowrap; }
@media (max-width: 620px) { .cta { flex-direction: column; align-items: stretch; } .cta .btn { width: 100%; justify-content: center; text-align: center; } }