/* ============================================================
   DIAMOND TURBO PARTS — Alibaba storefront style
   Wuxi Diamond International Trading Co., Ltd
   ============================================================ */
:root {
  --dark: #1e1e1e;
  --dark-2: #141414;
  --accent: #e60012;          /* Pulsar red */
  --accent-dark: #c50010;
  --price: #e60012;
  --bg: #f5f5f5;
  --card: #ffffff;
  --line: #e5e5e5;
  --ink: #000000;             /* Pulsar headings are pure black */
  --ink-soft: #828282;        /* Pulsar body gray */
  --radius: 8px;              /* unified card/panel radius */
  --graphite: #2f3338;
  --graphite-dark: #1f2327;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Form controls do NOT inherit font by default -> they fall back to browser UI (Arial).
   Without this every <button>/<input> that lacks an explicit font-family renders off-font. */
button, input, select, textarea, optgroup { font-family: inherit; }
/* <b>/<strong> default to font-weight:bolder -> resolves to 900 inside a 700 parent.
   Poppins 900 is not self-hosted, so it would trigger synthetic bolding. Cap at 700. */
b, strong { font-weight: 700; }
html { scroll-behavior: smooth; font-size: 112.5%; } /* 1rem = 18px — 全局字号基准 */
body {
  font-family: "Roboto", "Helvetica Neue", Arial, "PingFang SC", sans-serif; /* Pulsar body font */
  background: var(--bg);
  color: #7a7a7a;           /* Pulsar paragraph gray */
  font-size: 0.9375rem;          /* Pulsar body size */
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pulsar-style headings: Poppins 600, #1e1e1e */
h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
  font-weight: 600;
  color: var(--ink);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Global container: fluid full-width, capped at 1920px */
.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
@media (max-width: 768px) { .container { padding: 0 20px; } }
section { padding: 40px 0; }
.alt { background: var(--card); }

/* ---------- Top utility bar ---------- */
.topbar { background: var(--dark); color: #c9c9c9; font-size: 0.8125rem; font-weight: 700; }
.topbar .container {
  display: flex; justify-content: space-between; align-items: center; height: 44px;
}
.topbar a:hover { color: #fff; }
.topbar .right { display: flex; gap: 16px; align-items: center; }
.topbar-brand { color: #fff; letter-spacing: .8px; white-space: nowrap; }
.topbar-mail, .topbar-tel { color: #c9c9c9; white-space: nowrap; font-size: 0.7812rem; }
/* Compact search + CTA living in the topbar */
.topbar .search { flex: 0 1 auto; width: 240px; max-width: 34vw; margin: 0; order: 0; }
.topbar .search input {
  padding: 6px 10px; font-size: 0.7812rem; font-weight: 700; background: #fff;
  border: 1px solid #43464c; border-right: none; border-radius: 4px 0 0 4px;
}
.topbar .search input::placeholder { color: #8a8d93; font-style: normal; }
.topbar .search input:focus { box-shadow: none; border-color: var(--accent); }
.topbar .search button {
  width: auto; min-width: 36px; padding: 0 10px; border-radius: 0 4px 4px 0; font-weight: 700;
}
.topbar .search button::before { display: none; }
.topbar .search button svg { width: 15px; height: 15px; }
.topbar .topbar-tel { color: #c9c9c9; white-space: nowrap; font-size: 0.7812rem; }
.topbar .topbar-cta { padding: 8px 16px; font-size: 0.7812rem; font-weight: 700; flex-shrink: 0; white-space: nowrap; }
@media (max-width: 1240px) { .topbar .search { width: 200px; } .topbar .topbar-mail { display: none; } }
@media (max-width: 1120px) { .topbar .search { width: 190px; } .topbar .topbar-tel { display: none; } }
@media (max-width: 900px) { .topbar .search { width: 150px; max-width: 30vw; } .topbar .topbar-cta { padding: 7px 12px; } .topbar .container > span { font-size: 0.75rem; letter-spacing: .4px; } }
@media (max-width: 640px) { .topbar .container > span { display: none; } .topbar .search { flex: 1 1 auto; max-width: none; } .topbar .right { flex: 1; justify-content: flex-end; } }

/* ---------- Main header ---------- */
.header { background: #fff; border-bottom: 1px solid var(--line); }
.header .container {
  display: flex; align-items: center; gap: 24px; padding: 16px 0;
}
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-mark {
  width: 46px; height: 46px; border-radius: 8px;
  background: var(--accent);
  display: grid; place-items: center; color: #fff;
  font-size: 1.375rem; font-weight: 700;
}
.logo b { font-size: 1.3125rem; letter-spacing: 1px; display: block; line-height: 1.15; }
.logo small { font-size: 0.6562rem; color: var(--ink-soft); letter-spacing: 1.2px; }
.search {
  flex: 1 1 auto; display: flex; max-width: 640px; margin: 0 auto;
}
.search input {
  flex: 1; min-width: 0; background: #fff;
  border: 1px solid var(--line); border-right: none;
  border-radius: 6px 0 0 6px;
  padding: 12px 18px; font-size: 0.875rem; font-family: inherit; color: var(--ink);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
.search input::placeholder { color: #9a9a9a; font-style: italic; letter-spacing: .4px; }
.search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230, 0, 18, .10); }
.search button {
  position: relative; z-index: 1;
  flex-shrink: 0; width: 56px;
  background: var(--accent); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 6px 6px 0; transition: background .2s;
}
/* speech-bubble notch pointing back into the input */
.search button::before {
  content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-right: 9px solid var(--accent); border-left: none;
  transition: border-right-color .2s;
}
.search button:hover { background: var(--accent-dark); }
.search button:hover::before { border-right-color: var(--accent-dark); }
.search button svg { width: 21px; height: 21px; display: block; }
.header-cta { flex-shrink: 0; display: flex; align-items: center; }
.header-cta .btn { padding: 10px 20px; font-size: 0.8438rem; }
.btn {
  display: inline-block; padding: 12px 26px; border-radius: 6px;
  font-weight: 500; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 1px;
  transition: background .2s, transform .15s;
  border: none; cursor: pointer;
}
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-dark); }
.btn-white { background: #fff; color: var(--accent); }
.btn-white:hover { background: #ffe8e8; }
.btn-ghost { display: inline-block; padding: 12px 30px; border: 1.5px solid rgba(255,255,255,.75); color: #fff; background: transparent; border-radius: 6px; font-weight: 500; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 1px; transition: background .2s, border-color .2s; cursor: pointer; }
.btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
.btn-outline { border: 1.5px solid var(--ink); background: transparent; color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }

/* ---------- Store nav ---------- */
.store-nav { background: var(--dark-2); position: sticky; top: 0; z-index: 90; }
.store-nav ul { display: flex; list-style: none; }
.store-nav a {
  display: block; padding: 15px 17px; color: #d6dae2;
  font-family: "Poppins", sans-serif; font-size: 0.875rem; font-weight: 600; letter-spacing: 1px;
  border-bottom: 3px solid transparent; transition: background .2s;
  white-space: nowrap;
}
.store-nav a:hover, .store-nav a.active { color: #fff; border-bottom-color: var(--accent); }
.store-nav li { position: relative; }
.store-nav li.has-drop > a::after {
  content: "▾"; font-size: 0.625rem; margin-left: 5px; opacity: .65;
}
.store-nav .drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 120;
  min-width: 240px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 0 0 6px 6px; box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
.store-nav li.has-drop:hover > .drop { display: block; }
.store-nav .drop li { position: static; }
.store-nav .drop a {
  padding: 0 18px; line-height: 32px; font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink); border-bottom: none; white-space: nowrap;
}
.store-nav .drop a:hover { background: #fdf0f0; color: var(--accent-dark); border-bottom: none; }
/* Second-level flyout submenu (e.g. BEFRAG Product Lines > CAT series) */
.store-nav .drop li.has-sub { position: relative; }
.store-nav .drop li.has-sub > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.store-nav .drop li.has-sub > a::after { content: "\25B8"; font-size: 0.625rem; opacity: .5; }
.store-nav .drop .sub {
  display: none; position: absolute; top: -7px; left: 100%; z-index: 130;
  min-width: 280px; margin: 0; padding: 6px 0; list-style: none;
  background: #fff; border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0; box-shadow: 0 10px 24px rgba(0, 0, 0, .14);
}
.store-nav .drop li.has-sub:hover > .sub { display: block; }
.store-nav .drop .sub a { padding: 0 18px; line-height: 38px; font-size: 0.7812rem; }

/* ---------- Hero: sidebar + banner ---------- */
.hero { background: var(--dark); padding: 0; }
.hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 0;
  width: 100%; max-width: 1920px; margin: 0 auto;
  padding: 0 40px; box-sizing: border-box;
}
.cat-side {
  background: #fff; margin: 0; padding: 10px 0; border-right: 1px solid var(--line);
}
.cat-side h4 {
  font-size: 0.8125rem; letter-spacing: 1.5px; color: var(--ink);
  padding: 10px 20px 8px; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}
.cat-side a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 20px; font-size: 0.875rem; color: var(--ink);
  border-bottom: 1px solid #f0f0f0; transition: background .15s;
}
.cat-side a:hover { background: #fdf0f0; color: var(--accent); }
.cat-side a span.arrow { color: var(--ink-soft); font-size: 0.75rem; }
.banner { position: relative; overflow: hidden; min-height: 420px; }
.slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .8s ease; display: flex; align-items: center;
}
.slide.active { opacity: 1; }
.slide .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,12,18,.88) 0%, rgba(10,12,18,.45) 55%, rgba(10,12,18,.1) 100%);
}
.slide-content { position: relative; z-index: 2; padding: 0 56px; max-width: 640px; color: #fff; }
.slide-content .tag {
  display: inline-block; font-size: 0.7188rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: #fff; background: var(--graphite); padding: 5px 14px; border-radius: 6px;
  font-weight: 700; margin-bottom: 18px;
}
.slide-content h1 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 600; line-height: 1.12; letter-spacing: -.5px; color: #fff; }
.slide-content h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 600; line-height: 1.1; color: #fff; }
.slide-content p { margin: 16px 0 26px; font-size: 0.9688rem; color: #d8dbe2; max-width: 480px; }
.banner-dots {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 3;
}
.banner-dots span {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer;
}
.banner-dots span.on { background: var(--accent); }

/* ---------- Section heads ---------- */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 18px; border-bottom: 2px solid var(--ink); padding-bottom: 12px;
}
.sec-head h2 { font-size: 1.75rem; font-weight: 600; letter-spacing: 0; text-transform: none; line-height: 1.2; }
.sec-head h2 i { font-style: normal; color: var(--accent); }
.sec-head a.more {
  font-size: 0.8125rem; font-weight: 700; color: var(--accent);
  letter-spacing: 1px; text-transform: uppercase;
}
.sec-head a.more:hover { text-decoration: underline; }
.sec-sub { color: var(--ink-soft); font-size: 0.9375rem; margin-bottom: 18px; max-width: 720px; }

/* ---------- About strip ---------- */
.about-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.about-wrap img { border-radius: var(--radius); box-shadow: var(--shadow); }
.about-text p { color: var(--ink-soft); font-size: 0.9062rem; margin-bottom: 12px; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.badge {
  background: #fdf0f0; color: var(--accent-dark); border: 1px solid #f3c4c6;
  font-size: 0.7812rem; font-weight: 700; padding: 7px 16px; border-radius: 6px;
}

/* ---------- Product grids ---------- */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
/* NOTE: .card / .card-img / .card-body below are not rendered by any page today.
   app.js ships a cardHTML() that emits .card markup, but no page has a grid it
   fills, so no .card exists at runtime. Product-card image zoom lives on the two
   surfaces that do render: .pcard-img (products.html) and .pg-card-img (index /
   category grids). Kept here so a future .card grid inherits the same behaviour. */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow .2s, transform .2s;
  display: flex; flex-direction: column;
}
.card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-3px); }
.card-img { aspect-ratio: 1/1; overflow: hidden; background: #fff; position: relative; }
/* Same product-card zoom, bound to the image area rather than the whole card. */
.card-img img { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; transition: transform .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .card-img:hover img { transform: scale(1.05); }
}
.card-img .flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: var(--graphite); color: #fff; font-size: 0.6875rem; font-weight: 700;
  padding: 3px 10px; border-radius: 6px; letter-spacing: .5px;
}
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.card-title {
  font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 39px;
}
.card-price { margin-top: 10px; font-size: 1.125rem; font-weight: 700; color: var(--price); }
.card-price small { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); }
.card-moq { font-size: 0.7812rem; color: var(--ink-soft); margin-top: 4px; }
.card-meta { font-size: 0.75rem; color: var(--ink-soft); margin-top: 8px; }
.card-meta b { color: var(--ink); font-weight: 600; }
.card-link {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
  font-size: 0.8125rem; font-weight: 700; color: var(--accent);
  display: flex; justify-content: space-between; align-items: center;
}
.card-link:hover { text-decoration: underline; }
.skeleton {
  border-radius: var(--radius); background: var(--card); border: 1px solid var(--line);
  min-height: 360px; position: relative; overflow: hidden;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.05), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%);} to { transform: translateX(100%);} }
.grid-msg {
  grid-column: 1 / -1; text-align: center; color: var(--ink-soft);
  background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 40px; font-size: 0.875rem;
}

/* ---------- Company introduction ---------- */
.intro-wrap { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: start; }
.intro-info { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.intro-info h3 {
  background: var(--dark-2); color: #fff; font-size: 0.875rem; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 14px 20px;
}
.info-row { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid #f0f0f0; }
.info-row:last-child { border-bottom: none; }
.info-row b {
  padding: 11px 20px; font-size: 0.8125rem; color: var(--ink-soft); font-weight: 600;
  background: #fafafa; border-right: 1px solid #f0f0f0;
}
.info-row span { padding: 11px 20px; font-size: 0.8438rem; }
.intro-copy p { color: var(--ink-soft); font-size: 0.9062rem; margin-bottom: 12px; }
.intro-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.istat {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  text-align: center; padding: 18px 10px;
}
.istat b { display: block; font-size: 1.5rem; font-weight: 600; color: var(--ink); }
.istat span { font-size: 0.75rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .8px; }
/* Company facts table merged into About Us */
.about-facts { margin-top: 22px; border-top: 1px solid #f0f0f0; }
.about-facts .info-row { grid-template-columns: 150px 1fr; }
.about-facts .info-row b { padding: 9px 0; font-size: 0.7812rem; }
.about-facts .info-row span { padding: 9px 0; font-size: 0.7812rem; }

/* ---------- Technical ---------- */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tech-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 26px; transition: box-shadow .2s, transform .2s;
}
.tech-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.tech-card .ico {
  width: 48px; height: 48px; border-radius: 8px; background: #fdf0f0;
  display: grid; place-items: center; font-size: 1.375rem; margin-bottom: 16px;
}
.tech-card h3 { font-size: 1.0312rem; margin-bottom: 8px; }
.tech-card p { font-size: 0.8438rem; color: var(--ink-soft); }

/* ---------- Contact ---------- */
.contact-wrap { display: grid; grid-template-columns: 1fr 1.25fr; gap: 18px; align-items: start; }
.contact-info {
  background: var(--dark-2); color: #fff; border-radius: var(--radius); padding: 36px 32px;
}
.contact-info h3 { font-size: 1.25rem; margin-bottom: 6px; }
.contact-info > p { opacity: .7; font-size: 0.8438rem; margin-bottom: 22px; }
.c-line { display: flex; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 0.875rem; }
.c-line .ico { flex: 0 0 24px; text-align: center; }
.c-line b { display: block; font-size: 0.6875rem; letter-spacing: 1.4px; text-transform: uppercase; opacity: .6; }
.form-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 36px 34px;
}
.form-card h3 { font-size: 1.125rem; margin-bottom: 4px; }
.form-card .sub { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.field label { font-size: 0.7812rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field textarea {
  border: 1.5px solid var(--line); border-radius: 5px; padding: 11px 14px;
  font-size: 0.875rem; font-family: inherit; background: #fafafa;
  transition: border-color .2s;
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); background: #fff;
}
.field textarea { resize: vertical; min-height: 110px; }
.form-status {
  margin-top: 14px; padding: 12px 16px; border-radius: 6px;
  font-size: 0.8438rem; font-weight: 600; display: none;
}
.form-status.ok { display: block; background: #eef7ee; color: #2e7d32; }
.form-status.err { display: block; background: #fdeceb; color: var(--accent); }

/* ---------- Footer (compact, Pulsar style) ---------- */
footer { background: #0c0c0d; color: #b9bdc4; padding: 36px 0 0; margin-top: 12px; }
.ax-cta + footer { margin-top: 0; }  /* red CTA band sits flush on the footer — no white gap */
.foot-grid {
  display: grid; grid-template-columns: 1.5fr .62fr .6fr .66fr .6fr; gap: 26px;  /* brand + 4 link columns */
  padding-bottom: 22px;
}
.foot-dist { font-size: 0.8125rem; font-weight: 600; color: #b9bdc4; }
.foot-dist a { color: #fff; }
.foot-brand { max-width: 300px; }
.foot-logo { display: flex; align-items: center; gap: 10px; }
.foot-logo .logo-mark { width: 40px; height: 40px; font-size: 1.1875rem; }
.foot-logo b { color: #fff; font-size: 1.1875rem; letter-spacing: 1px; font-family: "Poppins", sans-serif; }
.foot-divider { border: 0; border-top: 1px solid #26262a; margin: 14px 0; }
.foot-contact { display: grid; gap: 12px; }
.foot-contact-row { display: flex; gap: 11px; align-items: flex-start; font-size: 0.8438rem; line-height: 1.5; }
.foot-contact-row .ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #2c2c31; display: grid; place-items: center; color: #fff;
}
.foot-contact-row .ico svg { width: 15px; height: 15px; }
.foot-contact-row a { color: #e8eaee; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #4a4a50; }
.foot-contact-row a:hover { color: var(--accent); text-decoration-color: var(--accent); }
.foot-note { display: block; font-size: 0.7188rem; color: #83878f; margin-top: 2px; }
.foot-links b { color: #fff; display: block; margin-bottom: 14px; font-size: 1rem; font-family: "Poppins", sans-serif; }
.foot-links a {
  display: block; font-size: 0.875rem; font-weight: 400; line-height: 1.8;
  padding: 2px 0; color: #FFFFFF; transition: color .15s ease;
}
.foot-links a:hover { color: var(--accent); }
.foot-pay { display: flex; gap: 6px; flex-wrap: wrap; }
.foot-pay span {
  font-size: 0.625rem; font-weight: 700; letter-spacing: .5px; color: #b9bdc4;
  border: 1px solid #2c2c31; border-radius: 6px; padding: 3px 8px; background: #141416;
}
.copy-bar {
  border-top: 1px solid #1d1d20; padding: 12px 0;
  font-size: 0.7812rem; color: #83878f;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .copy-bar { flex-direction: column; justify-content: center; text-align: center; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Footer social icons (compact circles) ---------- */
.social-row { display: flex; gap: 8px; margin-top: 14px; }
.social-row a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; background: #1d1d20;
  transition: background .15s ease, transform .15s ease;
}
.social-row a:hover { background: var(--accent); transform: translateY(-2px); }
.social-row svg { width: 15px; height: 15px; display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .hero-grid { grid-template-columns: 1fr; }
  .cat-side { display: none; }
}
@media (max-width: 780px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .about-wrap, .intro-wrap, .contact-wrap, .tech-grid { grid-template-columns: 1fr; }
  .header .container { flex-wrap: wrap; gap: 14px; }
  .search { order: 3; max-width: 100%; width: 100%; }
  .store-nav ul { overflow-x: auto; }
  .store-nav a { white-space: nowrap; padding: 13px 18px; }
  /* 手机端：hover 弹层不可用，一级项直接跳分类页（子分类由列表页侧栏承接） */
  .store-nav .drop { display: none; }
  .store-nav li.has-drop > a::after { display: none; }
  .banner { min-height: 340px; }
}
@media (max-width: 520px) {
  .grid, .form-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Product list page (products.html) — Alibaba storefront style
   ============================================================ */
.breadcrumb { background: #fff; border-bottom: 1px solid var(--line); font-size: 0.8125rem; }
.breadcrumb .container { display: flex; gap: 8px; align-items: center; padding: 12px 40px; color: var(--ink-soft); }
@media (max-width: 768px) { .breadcrumb .container { padding: 12px 20px; } }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .sep { color: #c5c5c5; }
.breadcrumb .here { color: var(--ink); font-weight: 600; }

/* ---------- Product list page: intro heading (H1 + application scope) ---------- */
.plist-head { padding: 6px 0 2px; }
.plist-head h1 { font-size: 1.875rem; font-weight: 600; line-height: 1.22; margin: 0 0 10px; max-width: 1000px; }
.plist-lead { font-size: 0.9062rem; line-height: 1.7; color: var(--ink-soft); max-width: 980px; margin: 0; }
.plist-lead b { color: var(--ink); }

.plist-wrap {
  display: grid; grid-template-columns: 230px 1fr; gap: 20px;
  width: 100%; max-width: 1920px; margin: 24px auto 60px; padding: 0 40px;
  box-sizing: border-box; align-items: start;
}
@media (max-width: 768px) { .plist-wrap { padding: 0 20px; } }
.pgroups { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pgroups h4 {
  background: var(--dark-2); color: #fff; font-size: 0.8125rem; letter-spacing: 1.2px;
  text-transform: uppercase; padding: 13px 18px;
}
.pgroups a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; font-size: 0.8438rem; color: var(--ink);
  border-bottom: 1px solid #f2f2f2;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.pgroups a:last-child { border-bottom: none; }
/* Hover needs to read as "selected", not a faint grey wash: accent left bar +
   tinted background + accent text. The old #f4f4f4 was indistinguishable
   from the white row underneath. */
.pgroups a:hover {
  background: #fdf0f0; color: var(--accent); font-weight: 600;
  border-left-color: var(--accent);
}
.pgroups a.on { background: var(--graphite); color: #fff; font-weight: 700; border-left-color: var(--accent); }
.pgroups a.on:hover { background: var(--graphite-dark); color: #fff; border-left-color: var(--accent); }
.pgroups a .cnt { font-size: 0.75rem; opacity: .65; }
.pgroups a:hover .cnt { color: var(--accent); opacity: .8; }
/* Sidebar category groups with nav-mirrored sub-menus */
.pgroups .pg-head {
  font-weight: 700; font-size: 0.8125rem; letter-spacing: .6px; text-transform: uppercase;
  background: #fafafa;
}
.pgroups .pg-head::after { content: "▾"; font-size: 0.625rem; opacity: .55; margin-left: 8px; transition: transform .15s; }
.pgroups .pg-group:hover .pg-head::after { transform: rotate(180deg); }
/* Keep the parent row highlighted while its sub-menu is open, so the eye can
   follow the open group instead of losing the anchor. */
.pgroups .pg-group:hover .pg-head {
  background: #fdf0f0; color: var(--accent); border-left-color: var(--accent);
}
.pgroups .pg-head.on { background: #fdf0f0; color: var(--accent); border-left-color: var(--accent); }
/* collapsed by default — expand on hover, stay open for the active group */
.pgroups .pg-subs { display: none; background: #fff; }
.pgroups .pg-group:hover .pg-subs,
.pgroups .pg-head.on + .pg-subs { display: block; }
.pgroups .pg-subs a {
  padding: 9px 18px 9px 30px; font-size: 0.8rem; color: var(--ink-soft);
  border-bottom: 1px solid #f7f7f7; position: relative;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
/* bullet sits at 23px so it clears the 3px accent left bar */
.pgroups .pg-subs a::before { content: "·"; position: absolute; left: 23px; color: var(--ink-soft); font-weight: 700; }
.pgroups .pg-subs a:hover { color: var(--accent); background: #fdf0f0; font-weight: 600; border-left-color: var(--accent); }
.pgroups .pg-subs a:hover::before { color: var(--accent); }
.pgroups .pg-subs a.on { background: #fdf0f0; color: var(--accent); font-weight: 700; border-left-color: var(--accent); }
.pgroups .pg-subs a.on::before { color: var(--accent); }
.pgroups .pg-group:last-child .pg-head { border-bottom: none; }
.pgroups .pg-group:last-child .pg-subs a:last-child { border-bottom: none; }
/* Sidebar info block — OEM brands, popular model links, contact */
.pg-note { margin-top: 14px; padding: 22px 18px 24px; border-top: 2px solid var(--line); background: #fbfbfa; }
.pg-note h5 {
  font-size: 0.7188rem; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--ink-soft); margin: 16px 0 6px;
}
.pg-note h5:first-child { margin-top: 0; }
.pg-note p { font-size: 0.7812rem; line-height: 1.7; color: var(--ink-soft); }
.pg-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-tags a {
  display: inline-block; padding: 5px 11px; line-height: 1.4;
  font-size: 0.75rem; font-weight: 600; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.pg-tags a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.pg-note p a { display: inline; padding: 0; border: none; background: none; color: var(--accent-dark); font-weight: 600; }
.pg-note p a:hover { background: none; color: var(--accent); }

.plist-main { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.ptoolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--line); background: #fafafa;
  flex-wrap: wrap;
}
.ptoolbar .found { font-size: 0.8438rem; color: var(--ink-soft); }
/* Toolbar right cluster: inline search + sort */
.ptool-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.list-search {
  padding: 8px 14px; font-size: 0.8125rem; color: var(--ink); width: 230px; max-width: 100%;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.list-search::placeholder { color: #b5b5b5; }
.list-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(230, 0, 18, .10); }
.ptoolbar .found b { color: var(--ink); font-size: 1rem; }
.psort { display: flex; gap: 6px; align-items: center; }
.psort span { font-size: 0.7812rem; color: var(--ink-soft); margin-right: 4px; }
.psort button {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 0.7812rem; padding: 7px 14px; border-radius: 6px; cursor: pointer;
  font-family: inherit; transition: all .15s;
}
.psort button:hover { border-color: var(--accent); color: var(--accent); }
.psort button.on {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}

.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.pgrid .pcard {
  padding: 12px 12px 16px; border: 1px solid #e9e9e9; border-radius: 8px;
  display: flex; flex-direction: column; background: #fff;
  transition: box-shadow .2s, transform .2s; position: relative;
}
.pgrid .pcard:hover { box-shadow: 0 6px 20px rgba(0,0,0,.10); transform: translateY(-3px); z-index: 2; }
/* Red outline frame on hover — mirrors .ax-featured .pg-card::after (homepage
   featured grid, same 2px accent frame + fade). Drawn as an ::after overlay,
   NOT a border-color swap, so card content never reflows when it appears. */
.pgrid .pcard::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 8px;
  opacity: 0; transition: opacity .2s ease;
}
.pgrid .pcard:hover::after { opacity: 1; }
.pcard-img { display: block; aspect-ratio: 1/1; overflow: hidden; background: #f4f5f6; position: relative; border-radius: 8px; padding: 12px; }
/* Product-card image zoom: 1.05 from the centre, .3s, clipped by overflow:hidden
   above so the scaled image never reflows the card. Bound to the IMAGE AREA (not
   the whole card) so the effect only fires when the pointer is over the picture. */
.pcard-img img { width: 100%; height: 100%; object-fit: contain; transform-origin: center center; transition: transform .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .pcard-img:hover img { transform: scale(1.05); }
}
.pcard-title {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 12px; font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--ink);
  min-height: 63px; cursor: pointer;
}
.pcard-title:hover { color: var(--accent); }
.pcard-terms { margin-top: 8px; font-size: 0.8438rem; font-weight: 600; color: var(--ink); }
.pcard-terms small { font-size: 0.75rem; font-weight: 500; color: var(--ink-soft); }
.pcard-moq { font-size: 0.75rem; color: var(--ink-soft); margin-top: 3px; }
.pcard-meta { font-size: 0.75rem; color: var(--ink-soft); margin-top: 7px; line-height: 1.55; }
.pcard-meta b { color: var(--ink); font-weight: 600; }
.pcard-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
.pcard-actions .btn-quote {
  flex: 1; text-align: center; padding: 10px 0; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.8438rem; font-weight: 600;
  border: 1.5px solid var(--accent); cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.pcard-actions .btn-quote:hover { border-color: var(--accent-dark); background: var(--accent-dark); color: #fff; }
.pcard-actions .btn-chat {
  flex: 1; text-align: center; padding: 10px 0; border-radius: 999px;
  background: #fff; color: var(--ink); font-size: 0.8438rem; font-weight: 600;
  border: 1.5px solid #cfcfcf; cursor: pointer; font-family: inherit;
  transition: all .15s;
}
.pcard-actions .btn-chat:hover { border-color: var(--ink); }

.pager { display: flex; justify-content: center; gap: 8px; padding: 22px 18px 26px; border-top: 1px solid var(--line); }
.pager button {
  min-width: 38px; height: 38px; border: 1px solid var(--line); background: #fff;
  border-radius: 6px; font-size: 0.8438rem; cursor: pointer; font-family: inherit; color: var(--ink);
  transition: all .15s; padding: 0 10px;
}
.pager button:hover:not(:disabled) { border-color: var(--graphite); color: var(--graphite); }
.pager button.on { background: var(--graphite); border-color: var(--graphite); color: #fff; font-weight: 700; }
.pager button:disabled { opacity: .4; cursor: default; }
.pager .pinfo { font-size: 0.7812rem; color: var(--ink-soft); align-self: center; margin-left: 6px; }

.pgrid-empty { grid-column: 1 / -1; text-align: center; color: var(--ink-soft); padding: 70px 20px; font-size: 0.875rem; }

/* ---------- Inquiry modal ---------- */
.modal-mask {
  position: fixed; inset: 0; background: rgba(16,19,26,.55); z-index: 200;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-mask.open { display: flex; }
.modal {
  background: #fff; border-radius: 8px; width: min(560px, 100%);
  max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.modal-head b { font-size: 1rem; }
.modal-head button {
  border: none; background: none; font-size: 1.375rem; cursor: pointer; color: var(--ink-soft); line-height: 1;
}
.modal-body { padding: 20px 24px 24px; }
.modal-prod {
  display: flex; gap: 14px; align-items: center; background: #fafafa;
  border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 18px;
}
.modal-prod img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; }
.modal-prod .t { font-size: 0.8438rem; font-weight: 600; line-height: 1.4; }
.modal-prod .p { font-size: 0.875rem; font-weight: 700; color: var(--price); margin-top: 2px; }

@media (max-width: 1020px) {
  .plist-wrap { grid-template-columns: 1fr; }
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pgrid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Company Profile page (company_profile.html)
   ============================================================ */
.profile-wrap {
  display: grid; grid-template-columns: 280px 1fr; gap: 18px;
  width: 100%; max-width: 1920px; margin: 18px auto 40px; padding: 0 40px;
  box-sizing: border-box;
  align-items: start;
}
@media (max-width: 768px) { .profile-wrap { padding: 0 20px; } }

/* ---------- Sidebar: supplier card ---------- */
.profile-side { position: sticky; top: 14px; }
.sup-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; text-align: center;
}
.sup-logo {
  width: 58px; height: 58px; margin: 0 auto 12px; border-radius: 8px;
  background: linear-gradient(135deg, #141414, #3a3a3a); color: #d8d8d8;
  font-size: 1.75rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.sup-name { font-size: 0.9062rem; font-weight: 700; line-height: 1.4; }
.sup-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.vbadge {
  font-size: 0.6875rem; font-weight: 700; padding: 4px 10px; border-radius: 8px;
  background: #fdf3f3; color: var(--accent-dark); border: 1px solid #f3c4c6;
}
.vbadge.trade { background: #eef4ff; color: #2456c4; border-color: #c9dbff; }
.sup-loc { font-size: 0.7812rem; color: var(--ink-soft); margin-top: 10px; }

.sup-contact { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 16px; }
.sup-person { display: flex; align-items: center; gap: 10px; text-align: left; }
.sup-person .avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  background: #fdf0f0; color: var(--accent-dark); border: 1.5px solid #f3c4c6;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.0625rem;
}
.sup-person b { font-size: 0.8438rem; display: block; }
.sup-person small { font-size: 0.7188rem; color: var(--ink-soft); }
.sup-actions { display: flex; gap: 8px; margin-top: 12px; }
.sup-actions .btn { flex: 1; padding: 9px 0; font-size: 0.7812rem; text-align: center; border-radius: 6px; }
.sup-actions .btn-outline { border: 1px solid #d0d0d0; }
.sup-actions .btn-outline:hover { border-color: var(--ink); }

.sup-info { border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 8px; text-align: left; }
.sup-info .row { display: flex; gap: 10px; padding: 7px 0; font-size: 0.75rem; line-height: 1.45; }
.sup-info .row span { color: var(--ink-soft); width: 88px; flex: none; }
.sup-info .row b { font-weight: 600; word-break: break-all; }

/* ---------- Main column cards ---------- */
.cp-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 18px;
}
.cp-head {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 18px;
}
.cp-head h2 { font-size: 1.1875rem; font-weight: 700; }
.cp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-tags span {
  font-size: 0.7188rem; font-weight: 700; padding: 4px 11px; border-radius: 8px;
  background: #fdf3f3; color: var(--accent-dark); border: 1px solid #f3c4c6;
}
.cp-tags .tag-rate { background: #eef7ee; color: #2e7d32; border-color: #cde6cf; }
.cp-tags .tag-time { background: #f4f4f4; color: var(--ink-soft); border-color: var(--line); }

/* Snapshot attributes */
.cp-attrs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; }
.attr { display: flex; gap: 8px; padding: 9px 0; border-bottom: 1px dashed var(--line); font-size: 0.8125rem; line-height: 1.5; }
.attr:nth-last-child(-n+2) { border-bottom: none; }
.attr span { color: var(--ink-soft); width: 168px; flex: none; }
.attr b { font-weight: 600; }

/* Introduction + gallery */
.cp-intro-text p { font-size: 0.875rem; color: var(--ink-soft); line-height: 1.75; margin-bottom: 12px; }
.cp-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.cp-gallery figure { margin: 0; }
.cp-gallery img {
  width: 100%; height: auto; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); display: block;
}
.cp-gallery figcaption { font-size: 0.7188rem; color: var(--ink-soft); margin-top: 6px; text-align: center; }

/* Trade capability */
.cp-trade-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; }
.markets h3 { font-size: 0.875rem; font-weight: 700; margin-bottom: 14px; }
.mrow { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; font-size: 0.7812rem; }
.mrow span { width: 96px; flex: none; color: var(--ink-soft); }
.mrow .mbar { flex: 1; height: 10px; background: #f0f0f0; border-radius: 5px; overflow: hidden; }
.mrow .mbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--graphite), #6b7280); border-radius: 5px; }
.mrow b { width: 36px; text-align: right; font-weight: 700; }

.trade-stats { display: grid; gap: 10px; }
.tstat {
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  background: #fafafa; border: 1px solid var(--line); border-radius: 6px; padding: 10px 14px;
  font-size: 0.7812rem;
}
.tstat span { color: var(--ink-soft); }
.tstat b { font-weight: 700; text-align: right; }

/* Capacity table */
.cp-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.cp-table th, .cp-table td { padding: 11px 14px; border: 1px solid var(--line); text-align: left; line-height: 1.55; }
.cp-table th { background: #fafafa; width: 220px; color: var(--ink-soft); font-weight: 600; }
.cp-table td { color: var(--ink); }

/* Quality assurance */
.cp-qa { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qa {
  background: #fafafa; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px;
}
.qa b { display: block; font-size: 0.8125rem; margin-bottom: 5px; }
.qa span { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.6; }

/* Bottom CTA */
.cp-cta {
  background: linear-gradient(120deg, #141414, #3a3a3a);
  border-radius: var(--radius); padding: 30px 34px;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
}
.cp-cta h2 { color: #fff; font-size: 1.25rem; font-weight: 700; }
.cp-cta p { color: #b9bec9; font-size: 0.8125rem; margin-top: 6px; }
.cp-cta .btn { padding: 13px 34px; font-size: 0.9062rem; border-radius: 6px; }

@media (max-width: 1020px) {
  .profile-wrap { grid-template-columns: 1fr; }
  .profile-side { position: static; }
  .cp-attrs, .cp-qa { grid-template-columns: 1fr; }
  .attr:nth-last-child(-n+2) { border-bottom: 1px dashed var(--line); }
  .attr:last-child { border-bottom: none; }
  .cp-trade-grid { grid-template-columns: 1fr; }
  .cp-gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .cp-gallery { grid-template-columns: 1fr; }
  .cp-table th { width: 140px; }
}

/* ---------- Product Groups (Alibaba productlist module) ---------- */
.pg-section { padding: 36px 0 40px; }
.pg-module {
  display: grid; grid-template-columns: 230px 1fr;
  background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--graphite);
}
.pg-side { border-right: 1px solid var(--line); }
.pg-header { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.pg-title { font-size: 1.25rem; font-weight: 600; color: var(--ink); letter-spacing: 0; }
.pg-menu { list-style: none; padding: 6px 0; }
.pg-item { position: relative; }
.pg-item > a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 15px 0 20px; font-size: 0.875rem; line-height: 38px;
  color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pg-item > a:hover, .pg-item.on > a { background: #f7f7f7; color: var(--accent); }
.pg-item .pg-arrow { font-size: 0.75rem; color: var(--ink-soft); flex-shrink: 0; }
.pg-item.on > a .pg-arrow, .pg-item > a:hover .pg-arrow { color: var(--accent); }
.pg-sub {
  position: absolute; left: 100%; top: -1px; min-width: 220px;
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
  padding: 6px 0; opacity: 0; visibility: hidden; transform: translateX(-4px);
  transition: opacity .15s ease, transform .15s ease; z-index: 80;
}
.pg-item.has-sub:hover .pg-sub { opacity: 1; visibility: visible; transform: translateX(0); }
.pg-sub a { display: block; padding: 0 18px; font-size: 0.8438rem; line-height: 34px; color: var(--ink); white-space: nowrap; }
.pg-sub a:hover { color: var(--accent); background: #f7f7f7; }
.pg-main { padding: 14px 18px 20px; min-height: 420px; }
.pg-main-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 16px;
}
.pg-main-head h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .5px; }
.pg-main-head .pg-count { font-size: 0.7812rem; color: var(--ink-soft); }
.pg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pg-grid .grid-msg { grid-column: 1 / -1; }

/* Alibaba-style product card (4-up) */
.pg-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
.pg-card:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .12); transform: translateY(-2px); }
.pg-card-img {
  display: block; position: relative; border-bottom: 1px solid #f0f0f0;
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
  padding: 16px 16px 44px; background: #fff;
  overflow: hidden; /* clip the image zoom — without this the scaled image escapes the card */
}
.pg-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: center center; transition: transform .3s ease; }
@media (hover: hover) and (pointer: fine) {
  .pg-card-img:hover img { transform: scale(1.05); }
}
.pg-card-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  text-align: center; padding: 5px 8px 7px; background: rgba(255, 255, 255, .94);
  border-top: 1px solid #f5f5f5;
}
.pg-card-cap small { display: block; font-size: 0.6562rem; color: #999; letter-spacing: .4px; text-transform: uppercase; line-height: 1.5; }
.pg-card-cap b { display: block; font-size: 0.75rem; color: var(--ink-soft); line-height: 1.5; }
.pg-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pg-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-family: "Poppins", sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--ink); line-height: 1.3;
  min-height: 37px;
}
.pg-card-title:hover { color: var(--accent); }
.pg-card-price { font-size: 0.9375rem; font-weight: 600; letter-spacing: .5px; color: var(--price); line-height: 1.3; }
.pg-card-price small { font-size: 0.8125rem; font-weight: 600; }
.pg-card-moq { font-size: 0.75rem; color: var(--ink-soft); }
.pg-card-btns { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }
.pg-btn {
  flex: 1; text-align: center; font-family: "Poppins", sans-serif; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .5px; line-height: 33px;
  border-radius: 6px; border: 1px solid var(--ink); color: var(--ink);
  transition: background .15s, color .15s;
}
.pg-btn:hover { background: var(--ink); color: #fff; }
.pg-btn.chat { border-color: var(--graphite); color: var(--graphite); }
.pg-btn.chat:hover { background: var(--graphite); color: #fff; }
@media (max-width: 1020px) {
  .pg-module { grid-template-columns: 200px 1fr; }
  .pg-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 780px) {
  .pg-module { grid-template-columns: 1fr; }
  .pg-side { border-right: none; border-bottom: 1px solid var(--line); }
  .pg-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid var(--line);
    margin: 0 0 4px 24px; padding: 0;
  }
  .pg-sub a { line-height: 32px; }
  .pg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .pg-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ---------- Product detail page (product.html, Alibaba PDP style) ---------- */
.pd-wrap {
  /* 3-column ratio: gallery 40% / parameters 35% / supplier info 25% */
  display: grid; grid-template-columns: minmax(0, 40fr) minmax(0, 35fr) minmax(0, 25fr); gap: 9px;
  width: 100%; max-width: 1920px; margin: 24px auto 12px; padding: 0 40px;
  box-sizing: border-box; align-items: stretch;
}
@media (max-width: 768px) { .pd-wrap { padding: 0 20px; } }
.pd-loading, .pd-notfound { grid-column: 1 / -1; text-align: center; padding: 80px 20px; color: var(--ink-soft); }
.pd-notfound h2 { color: var(--ink); margin-bottom: 10px; }
.pd-notfound .btn { margin-top: 16px; }

/* Gallery */
.pd-gallery { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.pd-main-img { aspect-ratio: 1 / 1; overflow: hidden; background: #fafafa; border-radius: 6px; }
.pd-main-img img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease;
  cursor: zoom-in;
}
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumbs img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 6px;
  border: 2px solid transparent; cursor: pointer; background: #fafafa;
}
.pd-thumbs img.on { border-color: var(--accent); }
.pd-gallery-note { margin-top: 10px; font-size: 0.75rem; color: var(--ink-soft); text-align: center; }
/* Key selling points listed under the gallery image (compact, 13-14px via --fs-body-sm) */
.pd-gallery-points { margin: 12px 0 0; border-top: 1px dashed var(--line); padding-top: 12px; }
.pd-gallery-points li { margin-bottom: 4px; }

/* Info panel */
.pd-info { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.pd-title { font-size: 1.5rem; font-weight: 700; line-height: 1.35; margin-bottom: 16px; letter-spacing: -.2px; }
.pd-quote-line { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: 14px; }
.pd-price-line small { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); }
.pd-sellpoints { margin: 0 0 18px; padding-left: 18px; }
.pd-sellpoints li {
  font-size: 0.8438rem; color: #444; line-height: 1.7; margin-bottom: 5px;
}
.pd-sellpoints li::marker { color: #999; font-size: 0.75rem; }
.pd-keyattrs { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pd-keyattrs th, .pd-keyattrs td {
  font-size: 0.8438rem; text-align: left; padding: 7px 0; vertical-align: top;
}
.pd-keyattrs th { color: var(--ink-soft); font-weight: 500; width: 150px; padding-right: 28px; }
.pd-keyattrs td { color: var(--ink); font-weight: 600; }
.pd-trade { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.pd-trade th, .pd-trade td { font-size: 0.8125rem; text-align: left; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.pd-trade tr:last-child th, .pd-trade tr:last-child td { border-bottom: none; }
.pd-trade th { color: var(--ink-soft); font-weight: 500; width: 110px; padding-right: 28px; }
/* Right-rail action stack: one full-width button per row, equal height, 14px gaps */
.pd-actions { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 14px; }
.pd-actions .btn-accent, .pd-actions .btn-pd-chat, .pd-actions .btn-pd-mail {
  width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center;
}
.btn-pd-chat, .btn-pd-mail {
  padding: 11px 14px; border-radius: 6px;
  font-size: 0.875rem; font-weight: 700; border: 1.5px solid var(--ink);
  color: var(--ink); transition: background .15s, color .15s;
}
.btn-pd-chat { border-color: #12a150; color: #12a150; }
.btn-pd-chat:hover { background: #12a150; color: #fff; }
.btn-pd-mail:hover { background: var(--ink); color: #fff; }
.pd-guarantee { font-size: 0.75rem; color: var(--ink-soft); }

/* Supplier card (right rail) */
.pd-supplier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.pd-sup-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.pd-sup-logo {
  width: 46px; height: 46px; border-radius: 8px; background: var(--graphite);
  display: grid; place-items: center; color: #fff; font-size: 1.375rem; font-weight: 700; flex-shrink: 0;
}
.pd-sup-head b { display: block; font-size: 0.9375rem; }
.pd-sup-head small { font-size: 0.625rem; color: var(--ink-soft); letter-spacing: .3px; line-height: 1.4; display: block; }
.pd-sup-stats { display: flex; justify-content: space-between; text-align: center; padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pd-sup-stats b { display: block; font-size: 1rem; color: var(--ink); }
.pd-sup-stats span { font-size: 0.6875rem; color: var(--ink-soft); }
.pd-sup-actions { display: flex; flex-direction: column; gap: 8px; }
.pd-sup-actions .btn { text-align: center; }
.pd-sup-more { display: block; text-align: center; font-size: 0.7812rem; color: var(--ink-soft); margin-top: 12px; }
.pd-sup-more:hover { color: var(--accent); }
/* Right-rail trust blocks + quick links */
.pd-sup-extra { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 20px; display: grid; gap: 22px; }
.pd-sup-feat { display: flex; gap: 10px; align-items: flex-start; }
.pd-sup-ico {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 6px;
  background: #fdf0f0; display: grid; place-items: center; font-size: 1rem;
}
.pd-sup-feat b { display: block; font-size: 0.8125rem; line-height: 1.35; }
.pd-sup-feat small { display: block; font-size: 0.7188rem; color: var(--ink-soft); line-height: 1.5; margin-top: 2px; }
.pd-sup-links { margin-top: 6px; border-top: 1px dashed var(--line); padding-top: 14px; display: grid; gap: 2px; }
.pd-sup-links > b { font-size: 0.6875rem; letter-spacing: 1.2px; color: var(--ink-soft); margin-bottom: 6px; }
.pd-sup-links a { font-size: 0.7812rem; color: var(--ink); padding: 5px 0; transition: color .15s; }
.pd-sup-links a:hover { color: var(--accent); }
.pd-sup-links a::before { content: "› "; color: var(--ink-soft); font-weight: 700; }

/* Sections below */
.pd-section {
  width: 100%; max-width: 1920px; margin: 32px auto; padding: 24px 40px 28px;
  box-sizing: border-box;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
@media (max-width: 768px) { .pd-section { padding: 20px 20px 24px; } }
.pd-sec-title { font-size: 1.0625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.pd-desc p { font-size: 0.875rem; color: var(--ink); line-height: 1.8; margin-bottom: 12px; max-width: 900px; }
.pd-desc h3 {
  font-size: 0.9688rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ink); border-left: 4px solid var(--accent); padding-left: 10px;
  margin: 26px 0 12px;
}
.pd-desc h3:first-child { margin-top: 0; }
.pd-desc ul { margin: 0 0 14px 22px; max-width: 900px; }
.pd-desc ul li { font-size: 0.875rem; line-height: 1.9; color: var(--ink); }
.pd-desc table {
  width: 100%; max-width: 760px; border-collapse: collapse;
  margin: 0 0 18px; font-size: 0.8438rem;
}
.pd-desc th, .pd-desc td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; line-height: 1.6; }
.pd-desc th { background: #fafafa; color: var(--ink); font-weight: 600; }
.pd-desc tr:nth-child(even) td { background: #fcfcfc; }
.pd-desc .faq-q { font-weight: 700; margin-top: 14px; margin-bottom: 2px; }
/* ---- PDP four-module template (Description / Fitment / Specifications / FAQ) ---- */
.pd-mod-h { font-size: 1.3125rem; font-weight: 700; color: var(--ink); line-height: 1.35; margin: 0 0 14px; }
/* Module sub-headings + description kicker share ONE format (user-approved
   2026-10-08): red accent bar on the left + bold uppercase ink text — the
   border-bottom underline is replaced by the bar. */
.pd-mod-sub, .pd-doc-kicker {
  /* Poppins pinned: kicker is a <p> (inherits body Roboto) while .pd-mod-sub sits on
     h3 (inherits Poppins) — same 800 weight renders visually lighter in Roboto. */
  font-family: "Poppins", "Helvetica Neue", Helvetica, Arial, "PingFang SC", sans-serif;
  font-size: 0.9375rem; font-weight: 800; color: var(--ink);
  text-transform: uppercase; letter-spacing: .6px; line-height: 1.45;
  border-left: 4px solid var(--accent);
  padding: 1px 0 1px 10px;
}
.pd-mod-sub { margin: 22px 0 10px; }
.pd-mod-sub:first-child { margin-top: 0; }
.pd-spec-table { width: 100%; max-width: 900px; border-collapse: collapse; margin: 0 0 6px; }
/* 2026-10-15 batch-32 行高收紧。改前行高实测 44px（padding 9px + line-height
   1.6），Description 的 Housing 表动辄 9 行、Fitment 参数表 8 行，纵向拉得很长。
   现压到 34px：padding 9px→5px、line-height 1.6→1.45（headless 实测 offsetHeight）。
   参照物是同页右侧图库的 .pd-keyattrs —— 它一直是 33px（padding 7px），
   所以 34px 与既有视觉节奏一致，不是凭空压扁。字号 0.875rem 未动，
   只动行距与内边距，可读性不受影响。 */
.pd-spec-table th, .pd-spec-table td {
  border: 1px solid var(--line); padding: 5px 12px; text-align: left;
  font-size: 0.875rem; line-height: 1.45; color: var(--ink); vertical-align: top;
}
.pd-spec-table thead th { background: #fafafa; font-weight: 600; }
.pd-spec-table tbody th { background: #fafafa; font-weight: 600; width: 38%; }
.pd-spec-table tr:nth-child(even) td { background: #fcfcfc; }
.pd-fitment .pd-spec-table tbody th { width: auto; }
/* Caption printed directly beneath a spec table (extraTables[].note) — e.g.
   "Note: End-users can tune turbo performance by picking alternate turbine
   housing variants." Sits tight under its table, muted like a footnote. */
.pd-table-note {
  max-width: 900px;
  margin: 0 0 18px;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #6b7280);
}
/* Label/value parameter table (fitmentKV): the supplier document writes two
   columns — a parameter label and its value. Keep the label column at a
   readable fixed width instead of the vehicle table's auto sizing. */
.pd-fit-kv { max-width: 720px; }
.pd-fit-kv tbody th { width: 38%; }
.pd-spec-na { font-size: var(--fs-body); color: var(--ink-soft); margin: 0 0 6px; }
.pd-install-notes { margin: 0 0 6px 22px; }
/* PDP 三个面板（Description/Fitment/FAQ）描述性正文统一 15px（--fs-body），与 .pd-desc p 一致 */
.pd-install-notes li { font-size: var(--fs-body); line-height: 1.9; color: var(--ink); }
.pd-faq-cta { margin: 22px 0 0; font-size: var(--fs-body); color: var(--ink); }
.pd-faq-cta b { font-weight: 700; }
.pd-faq-cta .sep { color: #cfcfcf; margin: 0 6px; }
.pd-faq-cta a { color: var(--accent); font-weight: 700; letter-spacing: .4px; }
.pd-faq-cta a:hover { color: var(--accent); text-decoration: underline; }
/* Supplier-document fidelity helpers (PRODUCT_CONTENT_OVERRIDE extensions) */
.pd-doc-kicker { margin: 0 0 8px; }  /* glyph format shared with .pd-mod-sub above */
.pd-oe-plain { font-size: var(--fs-body); line-height: 1.9; color: var(--ink); margin: 0 0 6px; max-width: 900px; }
/* Factory P/N line under the OE reference list (not an OE cross-reference) */
.pd-oe-extra { font-size: var(--fs-body); line-height: 1.8; color: var(--ink-soft); margin: 0 0 6px; max-width: 900px; }
.pd-oe-extra b { color: var(--ink); font-weight: 600; }
/* "Does Not Fit" block — supplier documents name the models NOT covered */
.pd-not-fit li { color: var(--ink-soft); }
/* Universal-fitment lead (no vehicle table) — G-Series G25/G30/G35 units */
.pd-fit-note { margin: 0 0 10px; max-width: 900px; }
.pd-fit-note p { font-size: var(--fs-body); line-height: 1.75; color: var(--ink); margin: 0 0 4px; }
.pd-desc .faq-a { color: var(--ink-soft); margin-bottom: 8px; }
.pd-desc-imgs { margin-top: 14px; max-width: 640px; }
.pd-desc-imgs img { border-radius: 6px; border: 1px solid var(--line); }

/* ---------- Detail page tabs (WooCommerce style) ---------- */
.pd-tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end; list-style: none; margin: 0; padding: 0;
  border-bottom: 1px solid var(--line);
}
.pd-tabs li {
  padding: 13px 24px; font-size: 0.7812rem; font-weight: 700; letter-spacing: .8px; white-space: nowrap;
  color: #777; background: #f5f5f5; border: 1px solid var(--line); border-bottom: none;
  cursor: pointer; user-select: none; transition: color .15s, background .15s;
}
.pd-tabs li + li { margin-left: 6px; }
.pd-tabs li:hover { color: var(--ink); }
.pd-tabs li.on { background: #fff; color: var(--ink); margin-bottom: -1px; padding-bottom: 14px; }
.pd-tab-panel { background: #fff; border: 1px solid var(--line); border-top: none; padding: 28px 30px 32px; }
.pd-addinfo { width: 100%; border-collapse: collapse; }
.pd-addinfo tr:nth-child(odd) { background: #f7f7f7; }
.pd-addinfo th, .pd-addinfo td {
  text-align: left; padding: 7px 18px; font-size: 0.8438rem; line-height: 1.6;
  border: 1px solid #ededed; vertical-align: top;
}
.pd-addinfo th { width: 220px; font-weight: 600; color: var(--ink); padding-right: 28px; }
.pd-noreviews { font-size: 0.875rem; color: var(--ink-soft); }
.pd-noreviews a { color: var(--accent-dark); font-weight: 600; }

/* Fitment brand filter (2026-10-09) — chips filter the Compatible Vehicles
   table by its first column. Sits directly under the module heading and above
   the table. Active chip uses the site accent (same red language as the card
   hover frames / thumbnail selection). Row count is shown so the user always
   knows how much of the list is on screen. */
.pd-fit-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 10px 12px;
  background: #fafafa; border: 1px solid var(--line); border-radius: 8px;
}
.pd-fit-bar-lb {
  font-size: 0.75rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: #8a8a8a; margin-right: 2px;
}
.pd-fit-chip {
  font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  color: var(--ink-soft); background: #fff; border: 1px solid var(--line);
  transition: color .15s, background .15s, border-color .15s;
}
.pd-fit-chip:hover { color: var(--ink); border-color: #cfcfcf; }
.pd-fit-chip.on {
  color: #fff; background: var(--accent); border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(230,0,18,.22);
}
.pd-fit-count { font-size: 0.7812rem; color: #9a9a9a; margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) {
  .pd-fit-bar { gap: 6px; padding: 9px 10px; }
  .pd-fit-chip { padding: 7px 13px; font-size: 0.7812rem; }
  .pd-fit-count { margin-left: 0; width: 100%; }
}

/* Related products — compact grid (2026-10-09): 6 per row, smaller tiles.
   Titles clamp to exactly 5 lines with a FIXED block height so every card
   (image + title) is the same height across all rows; overflow tail text
   is intentionally cut (user-approved). Alibaba-style reference layout. */
.pd-related { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pd-rel-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; }
.pd-rel-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.12); transform: translateY(-2px); }
/* Red hover frame — same treatment as .pgrid .pcard / .ax-featured .pg-card */
.pd-rel-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 8px;
  opacity: 0; transition: opacity .2s ease;
}
.pd-rel-card:hover::after { opacity: 1; }
.pd-rel-img { aspect-ratio: 1 / 1; background: #fafafa; overflow: hidden; }
.pd-rel-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-rel-card:hover .pd-rel-img img { transform: scale(1.04); transition: transform .35s; }
.pd-rel-title {
  font-size: 0.8125rem; padding: 8px 10px 0; line-height: 20px;
  /* overflow:hidden clips at the PADDING edge, not the content edge, so a
     bottom padding would always reveal 8px of line 6. No bottom padding +
     height = 8px top pad + 5 x 20px lines = 108px exact -> line 6 starts
     exactly at the clip boundary, nothing peeks. line-clamp:5 adds the
     ellipsis. Integer line-height avoids subpixel drift. */
  height: 108px; overflow: hidden; flex-shrink: 0;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
}

/* Inquiry section */
.pd-inquiry-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: stretch; }
.form-card { background: #fafafa; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.form-card h3 { margin-bottom: 4px; }
.form-card .sub { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 16px; }
/* SEND INQUIRY sticks to the bottom edge of the inquiry form card */
#pd-inquiry-form { display: flex; flex-direction: column; }
#pd-inquiry-form .form-submit { margin-top: auto; }
.pd-inquiry-side { background: #fff7f2; border: 1px solid #ffe0c7; border-radius: var(--radius); padding: 22px; display: flex; flex-direction: column; }
/* Why-buy block appended under the attention panel, fills remaining side height */
.pd-why { margin-top: auto; padding-top: 14px; border-top: 1px dashed #ffe0c7; }
.pd-why h4 { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 8px; color: var(--ink); }
.pd-why ul { list-style: none; margin: 0; padding: 0; }
.pd-why li { position: relative; padding-left: 15px; font-size: 0.8438rem; line-height: 1.55; color: var(--ink); margin-bottom: 5px; }
.pd-why li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 600; font-size: 0.75rem; top: 1px; }
.pd-why li:last-child { margin-bottom: 0; }
.pd-inquiry-side h3 { font-size: 0.8125rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.pd-inquiry-side > b { display: block; font-size: 1rem; margin-bottom: 12px; }
.pd-side-line { font-size: 0.8438rem; padding: 5px 0; }
.pd-side-line a:hover { color: var(--accent); }
.pd-side-note { font-size: 0.7812rem; color: var(--ink-soft); margin-top: 12px; line-height: 1.7; border-top: 1px dashed #f3c4c6; padding-top: 12px; }

/* Detail page responsive */
@media (max-width: 1180px) {
  .pd-wrap { grid-template-columns: 380px 1fr; }
  .pd-supplier { grid-column: 1 / -1; }
  .pd-sup-stats { max-width: 420px; }
}
@media (max-width: 1020px) {
  .pd-wrap { grid-template-columns: 1fr; }
  .pd-related { grid-template-columns: repeat(3, 1fr); }
  .pd-inquiry-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pd-related { grid-template-columns: repeat(2, 1fr); }
  .pd-info { padding: 16px; }
}

/* ---------- Back to top ---------- */
.back-top {
  position: fixed; right: 16px; bottom: 28px; top: auto; z-index: 200;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 1.125rem; font-weight: 700;
  border: none; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s, background .15s;
}
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { background: var(--accent-dark); }

/* ---------- Simplified Contact Supplier (Pulsar-style) ---------- */
.contact-head { justify-content: center; border-bottom: none; margin-bottom: 6px; padding-bottom: 0; }
.contact-head h2 { font-size: 1.875rem; }
.contact-sub { text-align: center; max-width: 640px; margin: 0 auto 26px; }
#contact .form-card { max-width: 760px; margin: 0 auto; padding: 28px 30px; }
.contact-strip {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 8px 26px; margin-top: 20px; font-size: 0.8125rem; color: var(--ink-soft);
}
.contact-strip a { color: var(--ink); font-weight: 600; }
.contact-strip a:hover { color: var(--accent); }

/* ---------- Blog & article pages ---------- */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.blog-card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 22px 22px 20px; text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.blog-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.12); transform: translateY(-2px); }
.blog-date { font-size: 0.7188rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); }
.blog-card h3 { font-size: 1.0312rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 0; }
.blog-card p { font-size: 0.8438rem; color: var(--ink-soft); line-height: 1.55; margin: 0; flex: 1; }
.blog-more { font-size: 0.8125rem; font-weight: 700; color: var(--ink); }

.page-head { padding: 26px 0 6px; }
.crumbs { font-size: 0.8125rem; color: var(--ink-soft); margin-bottom: 10px; }
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--accent); }
.page-head h1 { font-size: 2.375rem; font-weight: 600; line-height: 1.15; margin: 0 0 8px; }
.page-sub { font-size: 0.9375rem; color: var(--ink-soft); max-width: 760px; margin: 0 0 18px; }

.article-body { max-width: 820px; padding-bottom: 50px; }
.article-meta { font-size: 0.7812rem; color: var(--ink-soft); letter-spacing: .4px; text-transform: uppercase; }
.article-body h2 { font-size: 1.5rem; font-weight: 600; line-height: 1.3; margin: 32px 0 12px; }
.article-body p, .article-body li { font-size: 0.9062rem; line-height: 1.75; color: var(--ink); }
.article-body a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--accent); }
.article-body table { width: 100%; border-collapse: collapse; margin: 14px 0 20px; font-size: 0.8438rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.article-body th { background: #f7f7f6; font-weight: 700; }
.article-body ol, .article-body ul { padding-left: 22px; margin: 10px 0 20px; }
.article-body li { margin-bottom: 7px; }
.faq-item { border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin-bottom: 12px; background: #fbfbfa; }
.faq-item b { color: var(--ink); }
.faq-item p { margin: 6px 0 0; color: var(--ink-soft); }

@media (max-width: 900px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   HOMEPAGE 2026-09 REDESIGN (index.html only, ax-* scoped)
   Layout reference: industrial-parts one-page storefront
   Order: Header(nav) → Hero → Feature strip → Category row
   → Featured products → Why choose → Applications → CTA band
   ============================================================ */

/* ---------- Header with inline nav ---------- */
.ax-header { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 95; }
.ax-header .container { width: 100%; max-width: 1920px; }
.ax-header .container { display: flex; align-items: center; gap: 20px; padding: 12px 40px; }
@media (max-width: 768px) { .ax-header .container { padding: 12px 20px; } }
.ax-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ax-nav { display: flex; align-items: center; gap: 2px; flex: 1; justify-content: space-evenly; margin: 0 12px; }
.ax-nav a {
  display: block; padding: 10px 7px; font-size: 0.875rem; font-weight: 600;
  color: var(--ink); letter-spacing: .3px; border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.ax-nav a:hover { color: var(--accent); }
.ax-nav a.active { color: var(--accent); border-bottom-color: var(--accent); }
.ax-search { display: flex; flex-shrink: 0; width: 250px; }
.ax-search input {
  flex: 1; min-width: 0; border: 1px solid var(--line); border-right: none;
  border-radius: 6px 0 0 6px; padding: 9px 12px; font-size: 0.8125rem;
  font-family: inherit; outline: none; color: var(--ink); background: #fafafa;
}
.ax-search input:focus { border-color: var(--accent); background: #fff; }
.ax-search button {
  flex-shrink: 0; width: 42px; border: none; cursor: pointer;
  background: var(--accent); color: #fff; border-radius: 0 6px 6px 0;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.ax-search button:hover { background: var(--accent-dark); }
.ax-search svg { width: 17px; height: 17px; }
.ax-header .btn { padding: 9px 18px; font-size: 0.8125rem; flex-shrink: 0; }

/* ---------- Hero (full-bleed dark banner) ---------- */
.ax-hero .banner { min-height: 480px; height: max(calc(100vh - 183px), 480px); display: flex; align-items: center; }
.ax-hero .slide { display: flex; align-items: center; }
.ax-hero .slide .bg { filter: saturate(.92); }
.ax-hero .slide::after { background: linear-gradient(90deg, rgba(10,11,13,.88) 0%, rgba(10,11,13,.55) 46%, rgba(10,11,13,.18) 100%); }
/* Content-style slides (Pulsar layout): copy column left, product image right */
.ax-hero .slide-content { flex: 0 0 46%; max-width: 46%; padding: 0 40px 0 56px; }
/* Media column: 54% of the slide, image bleeds edge to edge (no white gaps) */
.ax-hero .slide-media {
  flex: 0 0 54%; max-width: 54%; align-self: stretch; position: relative; z-index: 2;
  display: flex; align-items: stretch; justify-content: stretch; padding: 0;
  background: transparent; overflow: hidden;
}
.ax-hero .slide-media img {
  display: block; width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; object-position: center;
  border-radius: 0; filter: none;
}
/* Single-column trust list fits the narrower copy column */
.ax-hero .ax-hero-trust { grid-template-columns: 1fr; gap: 10px; max-width: 520px; margin-top: 0; }
.ax-hero .ax-hero-trust .trust-item { font-size: 0.8438rem; }
.ax-hero .ax-hero-trust .ti-ico { width: 17px; height: 17px; }
.ax-hero .ax-hero-trust .ti-ico svg { width: 10px; height: 10px; }
.ax-hero .slide-content .tag {
  display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 2.5px;
  text-transform: uppercase; color: #ff9d9d; margin-bottom: 18px;
}
.ax-hero .slide-content h1, .ax-hero .slide-content h2 {
  font-size: clamp(32px, 2.4vw, 36px); font-weight: 600;   /* spec: 32-36px in the 46% copy column */
  text-transform: none; line-height: 1.18; letter-spacing: 0;
}
.ax-hero .slide-content p { margin: 18px 0 28px; font-size: 0.9688rem; font-weight: 400; color: #c9cdd6; max-width: 520px; line-height: 1.6; }
.ax-hero .slide-btns { display: flex; gap: 14px; flex-wrap: wrap; position: relative; z-index: 2; margin-top: 28px; }
.ax-hero .btn-accent { padding: 13px 30px; font-size: 0.9062rem; }
.ax-hero .btn-ghost { padding: 12px 30px; border: 1.5px solid rgba(255,255,255,.75); color: #fff; background: transparent; border-radius: 6px; font-weight: 500; font-size: 0.9375rem; text-transform: uppercase; letter-spacing: 1px; transition: background .2s, border-color .2s; }
.ax-hero .btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
/* .ax-hero-script removed: dead rule (no markup uses it) with non-standard script font */
.ax-hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 3; display: flex; gap: 9px; }
.ax-hero-dots span { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; transition: background .2s; }
.ax-hero-dots span.on { background: var(--accent); }

/* ---------- Icon-card strip: merged into the hero carousel frame ---------- */
.ax-hero-strip { padding: 0; }
.tb-features {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
  padding: 8px 10px; background: #fff; border: 1px solid #E0E0E0; border-radius: 8px;
}
.tb-perf { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 16px 26px; border-top: 1px solid #ececee; }
.tb-certs { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 26px; border-top: 1px solid #ececee; background: #fafafa; }
.tb-certs .ax-certs-link { margin-left: auto; }
.ax-strip-item {
  display: flex; align-items: center; gap: 10px; color: var(--ink);
  min-height: 40px; padding: 0 8px;
  background: transparent; border: none; border-radius: 0;
}
/* Hairline divider between tiles so the four equal tracks read as four
   distinct zones. Skipped on the 2-up and 1-up layouts, where the border
   would land on the wrong edge of a wrapped pair. */
.tb-features > .ax-strip-item + .ax-strip-item { border-left: 1px solid #ececee; }
@media (max-width: 900px) {
  .tb-features > .ax-strip-item + .ax-strip-item { border-left: none; }
}
/* Text block: anchored to the bottom of the module, icon stays vertically centered */
.ax-strip-item > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.ax-strip-item .ico {
  flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%;
  background: #fdf0f0; display: grid; place-items: center; color: var(--accent);
}
.ax-strip-item .ico svg { width: 24px; height: 24px; }
.ax-strip-item b { display: block; font-size: 0.8438rem; font-family: "Poppins", sans-serif; font-weight: 600; color: var(--ink); }
.ax-strip-item small { display: block; font-size: 0.75rem; color: var(--ink-soft); line-height: 1.45; }

/* ---------- Category row (8 tiles) ---------- */
.ax-cats { background: #fff; padding: 24px 0 26px; }
.ax-cats-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; align-items: stretch; }
.ax-cat {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ax-cat:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,.09); border-color: #f3c4c6; }
/* Category cards (homepage 12-tile grid): hover frame matches the 2px red
   outline of .ax-featured product cards — 1px red border + 1px outer
   box-shadow ring = continuous 2px, no layout shift. Scoped to .ax-cats so
   blog/news cards (shared .ax-cat) keep their light-pink hover. */
.ax-cats .ax-cat:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 10px 22px rgba(0,0,0,.09); }
/* Image area fills the whole card box: 1:1 aspect-ratio (scales with column
   width at 6/4/2-col breakpoints) so 1200×1200 square product shots fill the
   box edge-to-edge; object-fit:contain letterboxes non-square shots (900×554,
   1100×733 on technical.html) without cropping. Padding 8px keeps a hairline
   inset; overflow:hidden clips the hover zoom. */
.ax-cat-img { height: auto; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #f4f5f6; padding: 8px; box-sizing: border-box; overflow: hidden; }
.ax-cat-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .18s ease; }
.ax-cat:hover .ax-cat-img img { transform: scale(1.06); }
.ax-cat-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 13px 13px; }
/* Category card title — bumped from 12.5px/600 (too small to scan next to the
   6-up photo grid). 15px/700 with a 2-line clamp so long names like
   "Pneumatic Actuator" stay on one line and long ones wrap instead of
   overflowing the card. */
.ax-cat-foot b {
  font-size: 0.9375rem; font-family: "Poppins", sans-serif; font-weight: 700;
  color: var(--ink); line-height: 1.28; letter-spacing: -.1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
/* Reserve the full 2-line title block on EVERY category card, so the footer is
   a constant height whether the name wraps ("Pneumatic Actuator") or not
   ("Nozzle Ring"). Without this the 1-line cards collapse to a 1-line footer
   and grid stretch dumps the leftover ~21px as dead white space at the card
   bottom — titles and → arrows then float at different heights and the two
   rows read as unaligned. 2 x line-height 1.28 = 2.56em, and em tracks the
   title's own font-size, so it stays correct if the size is retuned.
   Scoped to .ax-cats: blog/news cards share .ax-cat but size their own
   footers (#blog rules below) and must keep their natural height. */
.ax-cats .ax-cat-foot b { min-height: 2.56em; }
/* Pin the footer to the card bottom so every tile in a row shares one baseline
   for its title and → arrow regardless of title wrap. */
.ax-cat-foot { margin-top: auto; }
.ax-cat-foot em { flex: 0 0 auto; font-style: normal; font-size: 0.9375rem; color: #c2c6cc; transition: color .15s, transform .15s; }
.ax-cat:hover em { color: var(--accent); transform: translateX(4px); }

/* ---------- Section headers (eyebrow style) ---------- */
.ax-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.ax-eyebrow {
  display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.ax-head h2 { font-size: 1.75rem; font-weight: 600; letter-spacing: 0; }  /* Pulsar section titles: 28px / 600 */
.ax-head .ax-sub { margin-top: 6px; font-size: 0.9375rem; color: var(--ink-soft); }
.ax-head-link { font-size: 0.8438rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.ax-head-link:hover { color: var(--accent-dark); }

/* ---------- Featured products ---------- */
.ax-featured { background: #fff; padding: 40px 0 48px; }
.ax-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ax-chips button {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 0.8125rem; font-weight: 600;
  font-family: inherit; cursor: pointer; transition: all .15s;
}
.ax-chips button:hover { border-color: var(--accent); color: var(--accent); }
.ax-chips button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ax-pg-meta { font-size: 0.7812rem; color: var(--ink-soft); margin-bottom: 14px; }
/* Most Popular grid — spec 2026-10-15: 5 cols x 4 rows = 20 picks, 20px gutter, 30px row gap */
.ax-featured .pg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 20px; }

/* Most Popular Turbochargers header (centered, side lines) — 34px/700/#111
   (.ax-head prefix out-specifies the generic .ax-head h2 28px/600 rule above) */
.ax-head.center { display: block; text-align: center; }
.ax-head .ax-title-lines {
  display: flex; align-items: center; gap: 20px; justify-content: center;
  font-size: 2.125rem; font-weight: 700; color: #111; line-height: 1.2;
}
.ax-title-lines::before, .ax-title-lines::after { content: ""; flex: 1; height: 1px; background: #e4e4e8; }
.ax-head.center .ax-sub { max-width: 600px; margin: 14px auto 0; font-size: 0.9375rem; color: #888; line-height: 1.5; }

/* Most Popular Turbochargers cards — spec 2026-10-15:
   5 cols x 4 rows = 20 cards, 16px padding, square 1:1 image well,
   two-line text (part number + vehicle), full-width red quote button,
   1px card outline (added later the same day — the grid read too pale). */
/* Card frame: a permanent 1px outline so the 5x4 grid reads as a solid block
   instead of 20 floating photos on a white page. The red hover frame below
   still overrides it on mouse-over. */
.ax-featured .pg-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px; position: relative;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.ax-featured .pg-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); transform: translateY(-4px) scale(1.015); }
/* Red outline frame on hover: fades in, slight lift+scale, reverts on mouse-out */
.ax-featured .pg-card::after {
  content: ""; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 10px;
  opacity: 0; transition: opacity .2s ease;
}
.ax-featured .pg-card:hover::after { opacity: 1; }
/* Image well: square so the 1:1 product photos fill the frame edge-to-edge.
   A fixed pixel height (old: 200px) left grey gutters on the sides once the
   5-up grid made cards ~344px wide — the photo only covered the middle 200px. */
.ax-featured .pg-card-img {
  border-bottom: none; padding: 0; margin-bottom: 12px;
  width: 100%; aspect-ratio: 1 / 1; height: auto;
  background: #FAFAFB; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.ax-featured .pg-card-img img {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover; object-position: center;
}
.ax-featured .pg-card-cap, .ax-featured .pg-card-moq, .ax-featured .pg-card-meta { display: none; }
.ax-featured .pg-card-body { padding: 0; gap: 0; text-align: center; }
.ax-featured .pg-card-title { display: block; font-size: 1rem; font-weight: 600; color: #111; line-height: 1.3; min-height: 0; }
.ax-featured .pg-card-pn, .ax-featured .pg-card-sub {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ax-featured .pg-card-sub { font-size: 0.8125rem; font-weight: 400; color: #666; line-height: 1.4; margin-top: 3px; }
.ax-featured .pg-card-price { text-align: center; }
.ax-featured .pg-card-btns { justify-content: center; padding-top: 0; margin-top: 12px; }
.ax-featured .pg-btn.chat { display: none; }
.ax-featured .pg-btn.quote {
  flex: 1 1 auto; width: 100%; height: 36px; line-height: 34px; padding: 0;
  background: #E60012; border-color: #E60012; color: #fff;
  border-radius: 4px; letter-spacing: 1px;
}
.ax-featured .pg-btn.quote:hover {
  background: #CF0010; border-color: #CF0010; color: #fff;
  box-shadow: 0 4px 12px rgba(230, 0, 18, .28);
}

/* View-all CTA under the curated Most Popular grid (red, centered, one size up) */
.ax-viewall { text-align: center; margin-top: 40px; }
.ax-viewall .ax-viewall-btn {
  display: inline-block; padding: 12px 32px; font-size: 0.9375rem; font-weight: 600;
  border-radius: 4px; letter-spacing: .3px; text-decoration: none;
}

/* ---------- BEFRAG Authorized Distributor band (dark, full width) ---------- */
.bf-band { background: #141414; padding: 48px 0; }
.bf-band-grid { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; }
.bf-band-logo { height: 40px; display: flex; align-items: center; }
.bf-band-logo img { height: 40px; width: auto; display: block; }
/* Typographic placeholder until the official BEFRAG logo file is supplied */
.bf-band-logo .bf-wordmark {
  font-family: "Poppins", sans-serif; font-size: 1.875rem; font-weight: 800;
  letter-spacing: 2px; color: #FFD700; line-height: 1;
}
.bf-band-eyebrow {
  margin-top: 12px; font-size: 0.75rem; font-weight: 600; color: #FFD700;
  letter-spacing: 2px; text-transform: uppercase;
}
.bf-band-title { margin: 8px 0 0; font-size: 1.375rem; font-weight: 700; color: #FFFFFF; line-height: 1.25; }
.bf-band-sub { margin: 8px 0 0; font-size: 0.875rem; color: #999; line-height: 1.6; }
.bf-band-trust { list-style: none; margin: 16px 0 0; padding: 0; font-size: 0.8125rem; color: #CCC; line-height: 1.7; }
.bf-band-cta {
  display: inline-block; margin-top: 20px; padding: 10px 24px; border-radius: 4px;
  background: #E60012; color: #fff; font-size: 0.8125rem; font-weight: 600;
  letter-spacing: .4px; text-decoration: none; transition: background .15s, box-shadow .15s;
}
.bf-band-cta:hover { background: #CF0010; box-shadow: 0 6px 18px rgba(230, 0, 18, .3); }
.bf-band-cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
/* Scoped to .bf-band: these selectors outrank the generic .bf-pcards
   component block further down the sheet, which would otherwise override
   the band card skin (padding, image height, border) by source order. */
.bf-band .bf-pcard {
  background: #FFFFFF; border: 0; border-radius: 8px; padding: 10px 10px 12px;
  display: flex; flex-direction: column; gap: 0; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.bf-band .bf-pcard:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, .5); }
/* 16:9 well matches the normalised product crops (960x540), so the frame
   scales with the card instead of clipping or letterboxing unevenly.
   margin/padding/border are reset here: the generic .bf-pcard-img rule
   further down the sheet pulls its well -18px out of the card edge, which
   makes the band photo bleed outside the white card on the left. */
.bf-band .bf-pcard-img {
  width: 100%; aspect-ratio: 16 / 9; height: auto; overflow: hidden;
  display: grid; place-items: center; background: #FFF; border-radius: 4px;
  margin: 0; padding: 0; border: 0;
}
.bf-band .bf-pcard-img img { width: 100%; height: 100%; max-width: none; object-fit: contain; display: block; }
.bf-band .bf-pcard-name {
  /* margin-top:auto pushes titles to the card foot so a 1-line and a
     3-line name still bottom-align across the row */
  margin: auto 0 0; padding-top: 10px;
  font-size: 0.75rem; font-weight: 600; color: #333;
  text-align: center; line-height: 1.4;
}
/* Below 1500px the 380px copy column squeezes five cards into ~170px
   each and the titles wrap to 3 lines. Stack the copy above the cards
   instead so the row keeps a readable card width, and cap the copy
   measure so the sentence does not run the full container width. */
@media (max-width: 1500px) {
  .bf-band-grid { grid-template-columns: 1fr; gap: 28px; }
  .bf-band-copy { max-width: 660px; margin: 0 auto; text-align: center; }
  .bf-band-logo { justify-content: center; }
}
/* Most Popular cards — the curated 20 picks are specified as 4 rows x 5 cols,
   so 5-up must hold all the way down to 1200px (that covers 1280/1366/1440
   laptops, where a 4-up would break the 4 x 5 block into 5 rows of 4).
   Below 1200px the grid steps down for tablets and phones. */
@media (max-width: 1199px) {
  .ax-featured .pg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; }
}
@media (max-width: 1199px) {
  .bf-band-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 1023px) {
  /* Most Popular cards — tablet: 3 cols, 14px padding (image well stays square) */
  .ax-featured .pg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
  .ax-featured .pg-card { padding: 14px; }
  .ax-featured .pg-card-img { margin-bottom: 10px; }
}
@media (max-width: 1100px) {
  /* 5 across gets cramped once the copy stacks — go 3 + 2. A 6-track grid
     keeps every card the same width (2 tracks each); the trailing pair is
     offset by one track so it sits centred under the first three instead of
     hanging off the left edge. */
  .bf-band-cards { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
  .bf-band .bf-pcard { grid-column: span 2; }
  .bf-band .bf-pcard:nth-child(4) { grid-column: 2 / span 2; }
  .bf-band .bf-pcard:nth-child(5) { grid-column: 4 / span 2; }
}
@media (max-width: 767px) {
  .bf-band { padding: 40px 0; }
  .bf-band-copy { text-align: center; }
  .bf-band-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .bf-band .bf-pcard, .bf-band .bf-pcard:nth-child(4), .bf-band .bf-pcard:nth-child(5) { grid-column: auto; }
  /* the fifth card is alone on the last row — let it span the full width */
  .bf-band .bf-pcard:nth-child(5) { grid-column: 1 / -1; }
  .bf-band .bf-pcard-name { font-size: 0.7188rem; }
  /* Most Popular cards — mobile: 1 col, 12px padding (image well stays square) */
  .ax-featured .pg-grid { grid-template-columns: 1fr; gap: 20px 16px; }
  .ax-featured .pg-card { padding: 12px; }
  .ax-featured .pg-card-img { margin-bottom: 8px; }
  .ax-featured .pg-card-title { font-size: 0.9375rem; }
}

/* ---------- Why choose (light band) ---------- */
.ax-why { background: #fff; padding: 40px 0; }
/* The copy column is capped at 620px instead of a 1.05fr share: once the
   container goes fluid to 1920px a fractional column stretched the text to
   ~1000px (45+ characters per line) while the photo kept growing. */
/* Measured at 1920px: the photo column was 1149px wide. Left to stretch, a
   1024x1024 square shot became a 1149x700 letterbox (1.64:1) and `cover` cut
   off most of the showroom. Both columns now share a fixed 3:2-ish box and the
   surplus width is capped, so the image stays readable instead of cropped. */
.ax-why-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 760px); gap: 56px; align-items: center; justify-content: space-between; }
.ax-why-img {
  border-radius: 8px; overflow: hidden; box-shadow: 0 14px 34px rgba(0,0,0,.14);
  width: 100%; aspect-ratio: 4 / 3; max-height: 520px;
}
.ax-why-img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.ax-why .ax-eyebrow { color: var(--accent); }
.ax-why h2 { color: var(--ink); font-size: clamp(1.625rem, 2.2vw, 2.125rem); font-weight: 600; text-transform: none; line-height: 1.2; }
.ax-why-copy { margin: 16px 0 26px; font-size: 0.9375rem; color: var(--ink-soft); max-width: 34em; line-height: 1.6; }
/* Tightened from gap 22px / 48px icons: with the rem bump the four trust rows
   pushed this column taller than the photo. The photo is now the tallest side,
   which is what we want — the copy should not dictate height. */
.ax-why-list { display: grid; gap: 13px; margin-top: 4px; }
.ax-why-item { display: flex; gap: 12px; align-items: flex-start; }
.ax-why-item .ico {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  background: #fdf0f0; display: grid; place-items: center; color: var(--accent);
}
.ax-why-item .ico svg { width: 18px; height: 18px; }
.ax-why-item b { display: block; color: var(--ink); font-size: 0.9062rem; font-family: "Poppins", sans-serif; font-weight: 600; margin-bottom: 2px; line-height: 1.35; }
.ax-why-item small { display: block; color: var(--ink-soft); font-size: 0.7812rem; line-height: 1.45; }

/* ---------- Applications (4 vehicle tiles) ---------- */
.ax-app { background: var(--bg); padding: 36px 0 40px; }
.ax-app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ax-app-tile {
  position: relative; border-radius: 8px; overflow: hidden; min-height: 210px;
  background: linear-gradient(160deg, #f2f3f5 0%, #e8eaee 70%);
  display: flex; align-items: flex-end; padding: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ax-app-tile:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.12); }
.ax-app-tile svg.veh { position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 72%; height: 96px; color: #3a3f47; }
.ax-app-tile b { position: relative; z-index: 1; color: var(--ink); font-size: 0.9375rem; font-family: "Poppins", sans-serif; font-weight: 600; display: block; }
.ax-app-tile small { position: relative; z-index: 1; color: var(--ink-soft); font-size: 0.75rem; display: block; margin-top: 2px; }
.ax-app-tile .go {
  position: absolute; right: 14px; bottom: 16px; z-index: 1;
  width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,.08);
  display: grid; place-items: center; color: var(--ink); font-size: 0.9375rem;
  transition: background .15s, color .15s;
}
.ax-app-tile:hover .go { background: var(--accent); color: #fff; }

/* ---------- CTA band (brand red, full-bleed like the footer) ---------- */
.ax-cta {
  background: linear-gradient(115deg, var(--accent) 0%, var(--accent) 55%, var(--accent-dark) 100%);
  padding: 8px 0;
  width: 100%;
  margin: 0 auto;
}
.ax-cta .container { width: 100%; max-width: 1920px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ax-cta .ax-eyebrow { color: rgba(255,255,255,.85); margin-bottom: 4px; }
.ax-cta h2 { color: #fff; font-size: 1.75rem; font-weight: 600; text-transform: none; line-height: 1.2; }  /* Pulsar banner title: 28px/600 */
.ax-cta p { color: rgba(255,255,255,.8); font-size: 0.9375rem; margin-top: 6px; font-weight: 400; }
.ax-cta .btn { padding: 13px 30px; font-size: 0.875rem; flex-shrink: 0; }
.ax-cta .btn-white { background: #fff; color: var(--accent); }
.ax-cta .btn-white:hover { background: #ffe8e8; }

/* ---------- Responsive (homepage redesign) ---------- */
/* The Why-choose grid uses fixed 620px + 760px columns (1436px + gap). Below
   that they cannot both fit, so switch to a proportional split. */
@media (max-width: 1500px) {
  .ax-why-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; justify-content: stretch; }
}
@media (max-width: 1120px) {
  .ax-nav a { padding: 10px 9px; font-size: 0.7812rem; }
  .ax-search { width: 180px; }
  .ax-cats-grid { grid-template-columns: repeat(4, 1fr); row-gap: 16px; }
}
@media (max-width: 900px) {
  .ax-header .container { flex-wrap: wrap; }
  .ax-nav { order: 3; width: 100%; overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
  .ax-search { flex: 1 1 auto; width: auto; }
  .ax-hero .banner { min-height: 445px; height: max(calc(100vh - 224px), 445px); }
  .ax-hero-strip { padding: 0; }
  .tb-features { grid-template-columns: repeat(2, 1fr); }
  .ax-why-grid { grid-template-columns: 1fr; gap: 30px; }
  .ax-app-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Most Popular cards — 2 cols on small tablets. Scoped to 768-900px: this rule
   sits AFTER the 767px block that sets 1 column, and with equal specificity the
   later rule wins — so without the min-width floor it silently overrode the
   phone layout and phones got 2 columns instead of 1. */
@media (min-width: 768px) and (max-width: 900px) {
  .ax-featured .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ax-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .tb-features { grid-template-columns: 1fr; }
  .ax-hero-strip { padding: 0; }
  .ax-hero .banner { height: max(calc(100vh - 304px), 445px); }
  .tb-perf, .tb-certs { padding-left: 20px; padding-right: 20px; }
  .ax-app-grid { grid-template-columns: 1fr; }
  .ax-featured .pg-grid { grid-template-columns: 1fr; }
  .ax-hero-script { display: none; }
}

/* ---------- Hero trust signals (6 verifiable facts) ---------- */
.ax-hero-trust { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 20px; margin-top: 24px; max-width: 660px; }
.trust-item { display: flex; align-items: flex-start; gap: 8px; font-size: 0.7812rem; line-height: 1.45; color: rgba(255,255,255,.88); }
.trust-item b { font-family: "Poppins", sans-serif; font-weight: 600; color: #fff; }
.ti-ico { width: 16px; height: 16px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; flex: none; margin-top: 1px; }
.ti-ico svg { width: 9px; height: 9px; color: #fff; }
.trust-link { grid-column: 1 / -1; margin-top: 2px; font-size: 0.8125rem; color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.trust-link:hover { color: #fff; }
@media (max-width: 900px) { .ax-hero-trust { grid-template-columns: 1fr; gap: 7px; max-width: 460px; } }
/* Content hero on small screens: copy takes full width, product image hidden */
@media (max-width: 900px) {
  .ax-hero .slide-content { flex: 1 1 100%; max-width: 100%; padding: 0 5vw; }
  .ax-hero .slide-media { display: none; }
}

/* ---------- CTA band: two-column with inquiry form ---------- */
.ax-cta-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 18px; align-items: stretch; }
.ax-cta-grid > div:first-child { display: flex; flex-direction: column; justify-content: flex-end; }  /* copy bottom-aligns with the form */
/* Higher specificity so the grid wins over the generic .ax-cta .container flex rule */
.ax-cta .container.ax-cta-grid { display: grid; gap: 18px; }
.ax-cta-points { display: grid; gap: 4px; margin-top: 8px; font-size: 0.8125rem; color: rgba(255,255,255,.85); }
.ax-cta-form { padding: 8px 14px; width: 100%; display: flex; flex-direction: column; }  /* fill the grid track (margin:0 auto from #contact .form-card would shrink it) */
.ax-cta-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 5px; }
.ax-cta-form .field { margin-bottom: 8px; }
.ax-cta-form input, .ax-cta-form textarea, .ax-cta-form select {
  width: 100%; border: 1px solid #d9dde3; border-radius: 5px; background: #fff;
  padding: 6px 10px; font-size: 0.8438rem; line-height: 1.4; font-family: "Roboto", sans-serif; color: var(--ink);
}
.ax-cta-form select { cursor: pointer; }
.ax-cta-form input:focus, .ax-cta-form textarea:focus, .ax-cta-form select:focus { outline: none; border-color: var(--accent); }
.ax-cta-form textarea { min-height: 100px; resize: vertical; }
/* SEND INQUIRY sticks to the bottom edge of the CTA form card */
.ax-cta-form .form-submit { margin-top: auto; }
.ax-cta-form .btn { margin-top: 16px; padding: 7px 24px; font-size: 0.8438rem; }
@media (max-width: 900px) { .ax-cta .container.ax-cta-grid { display: grid; grid-template-columns: 1fr; gap: 24px; } .ax-cta-form .form-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .ax-cta { padding: 12px 0; } }

/* ---------- Forms: Target Market select (modals + product form) ---------- */
.form-card select, .modal select {
  width: 100%; border: 1px solid #d9dde3; border-radius: 5px; background: #fff;
  padding: 11px 13px; font-size: 0.875rem; font-family: "Roboto", sans-serif; color: var(--ink);
}
.form-card select:focus, .modal select:focus { outline: none; border-color: var(--accent); }

/* ---------- European market module (company profile) ---------- */
.eu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.eu-item { border: 1px solid #eceef1; border-radius: 8px; padding: 18px; background: #fafbfc; }
.eu-item .eu-ico {
  width: 48px; height: 48px; border-radius: 50%; background: #fdf0f0; color: var(--accent);
  display: grid; place-items: center; font-size: 1.25rem; margin-bottom: 12px;
}
.eu-item b { display: block; font-family: "Poppins", sans-serif; font-size: 0.9062rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.eu-item span { display: block; font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); }
.eu-item ul { margin: 6px 0 0; padding-left: 16px; font-size: 0.8125rem; color: var(--ink-soft); line-height: 1.7; }
@media (max-width: 900px) { .eu-grid { grid-template-columns: 1fr; } }

/* ---------- Partners page ---------- */
.ptn-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 8px; }
.ptn-stat { border: 1px solid #eceef1; border-radius: 8px; padding: 18px 14px; text-align: center; background: #fafbfc; }
.ptn-stat b { display: block; font-family: "Poppins", sans-serif; font-size: 1.625rem; font-weight: 600; color: var(--accent); }
.ptn-stat span { display: block; font-size: 0.7812rem; color: var(--ink-soft); margin-top: 4px; line-height: 1.4; }
@media (max-width: 760px) { .ptn-stats { grid-template-columns: repeat(2, 1fr); } }
.ptn-flag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ptn-flag-row span {
  border: 1px solid #e2e5ea; border-radius: 999px; padding: 5px 14px;
  font-size: 0.7812rem; color: var(--ink); background: #fff;
}

/* ---------- Real logo image ---------- */
.logo-img { height: 56px; width: auto; display: block; }
.foot-logo { gap: 0; }
.foot-logo-img { height: 44px; width: auto; display: block; border-radius: 8px; }

/* ---------- Nav v2: wide components dropdown + index (ax-nav) dropdowns ---------- */
.store-nav .drop.drop-wide { min-width: 380px; column-count: 2; column-gap: 0; }
.store-nav .drop.drop-wide li { break-inside: avoid; }
.ax-nav ul { display: flex; list-style: none; align-items: center; }
.ax-nav li { position: relative; }
.ax-nav li.has-drop > a::after { content: "\25BE"; font-size: 0.5625rem; margin-left: 5px; opacity: .55; }
.ax-nav .drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 120;
  background: #fff; min-width: 215px; list-style: none;
  border-top: 2px solid var(--accent); box-shadow: 0 12px 28px rgba(0,0,0,.14);
}
.ax-nav li.has-drop:hover > .drop { display: block; }
.ax-nav .drop a {
  display: block; padding: 0 16px; line-height: 32px; font-size: 0.7812rem;
  font-weight: 500; color: var(--ink); letter-spacing: .2px; border-bottom: none;
}
.ax-nav .drop a:hover { background: #fdf0f0; color: var(--accent-dark); }
.ax-nav .drop.drop-wide { min-width: 400px; column-count: 2; column-gap: 0; }
.ax-nav .drop.drop-wide li { break-inside: avoid; }
.ax-nav .drop li.has-sub { position: relative; }
.ax-nav .drop li.has-sub > a { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.ax-nav .drop li.has-sub > a::after { content: "\25B8"; font-size: 0.625rem; opacity: .5; }
/* Nested product submenu expands downward inside the panel — no viewport overflow */
.ax-nav .drop .sub {
  display: none; position: static; list-style: none; min-width: 0;
  background: #fafafa; border-top: 1px solid var(--line);
}
.ax-nav .drop li.has-sub:hover > .sub { display: block; }
.ax-nav .drop .sub a { padding: 0 16px 0 30px; line-height: 36px; font-size: 0.7812rem; font-weight: 500; color: var(--ink-soft); }
@media (max-width: 1100px) {
  .ax-nav .drop, .ax-nav li.has-drop > a::after { display: none; }
}

/* ---------- Certification badges ---------- */
.ax-certs { background: #fff; border-bottom: 1px solid var(--line); }
.ax-certs-in { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 0; }
.ax-certs-label { font-size: 0.7812rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-soft); margin-right: 6px; }
.cert-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px;
  border: 1.5px solid #e3e5e9; border-radius: 999px; font-family: "Poppins", sans-serif;
  font-size: 0.8125rem; font-weight: 600; color: var(--ink); background: #fafbfc;
}
.cert-badge svg { width: 16px; height: 16px; color: var(--accent); }
.ax-certs-link { margin-left: auto; font-size: 0.8125rem; color: var(--accent); font-weight: 600; }
.cp-certs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.cp-cert { border: 1px solid #eceef1; border-radius: 8px; padding: 20px 16px; text-align: center; background: #fafbfc; }
.cp-cert svg { width: 48px; height: 48px; color: var(--accent); margin-bottom: 8px; }
.cp-cert b { display: block; font-family: "Poppins", sans-serif; font-size: 0.9688rem; color: var(--ink); }
.cp-cert span { display: block; font-size: 0.7812rem; color: var(--ink-soft); margin-top: 4px; }
.cert-note { font-size: 0.7812rem; color: var(--ink-soft); margin-top: 12px; }
@media (max-width: 760px) { .cp-certs-grid { grid-template-columns: 1fr; } }

/* ---------- Factory equipment & inspection ---------- */
.cap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.cap-stat { border: 1px solid #eceef1; border-radius: 8px; padding: 16px 12px; text-align: center; background: #fafbfc; }
.cap-stat b { display: block; font-family: "Poppins", sans-serif; font-size: 1.375rem; font-weight: 600; color: var(--accent); }
.cap-stat span { display: block; font-size: 0.75rem; color: var(--ink-soft); margin-top: 3px; }
.cp-sub { font-family: "Poppins", sans-serif; font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin: 20px 0 16px; }
/* ---------- Company intro: engine brand chips ---------- */
.cp-brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.cp-brand {
  display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink); font-family: "Poppins", sans-serif;
  font-size: 0.7812rem; font-weight: 600; letter-spacing: .2px;
}
.eq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.eq-item { border: 1px solid #eceef1; border-radius: 8px; padding: 14px; background: #fff; }
.eq-item b { display: block; font-family: "Poppins", sans-serif; font-size: 0.8438rem; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.eq-item span { display: block; font-size: 0.7812rem; line-height: 1.5; color: var(--ink-soft); }
.qc-flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; counter-reset: step; }
.qc-step { border: 1px solid #eceef1; border-radius: 8px; padding: 12px 10px; text-align: center; background: #fdf0f0; }
.qc-step b { display: block; width: 26px; height: 26px; line-height: 26px; margin: 0 auto 6px; border-radius: 50%; background: var(--accent); color: #fff; font-family: "Poppins", sans-serif; font-size: 0.8125rem; }
.qc-step span { display: block; font-size: 0.7188rem; line-height: 1.4; color: var(--ink); }
.ws-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ws-ph { border: 2px dashed #d9dde3; border-radius: 8px; padding: 26px 14px; text-align: center; background: #fafbfc; }
.ws-ph span { font-size: 1.5rem; display: block; margin-bottom: 6px; }
.ws-ph b { display: block; font-family: "Poppins", sans-serif; font-size: 0.8438rem; color: var(--ink); }
.ws-ph small { display: block; font-size: 0.7188rem; color: var(--ink-soft); margin-top: 3px; }
/* Workshop real photos (replaced the dashed .ws-ph placeholders) */
.ws-ph-img { margin: 0; }
.ws-ph-img img {
  width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--line);
}
.ws-ph-img figcaption { text-align: center; margin-top: 8px; }
.ws-ph-img b { display: block; font-family: "Poppins", sans-serif; font-size: 0.8438rem; color: var(--ink); }
.ws-ph-img small { display: block; font-size: 0.7188rem; color: var(--ink-soft); margin-top: 3px; }
@media (max-width: 900px) { .cap-stats, .eq-grid, .ws-grid { grid-template-columns: 1fr 1fr; } .qc-flow { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Floating contact dock ---------- */
.contact-dock { position: fixed; right: 16px; bottom: 92px; z-index: 85; display: flex; flex-direction: column; gap: 16px; }
.cd-btn { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.22); transition: transform .15s ease; }
.cd-btn:hover { transform: translateY(-2px); }
.cd-btn svg { width: 22px; height: 22px; }
.cd-wa { background: var(--accent); }
.cd-mail { background: var(--accent); }
.cd-inq { background: var(--accent); color: #fff; }
@media (max-width: 760px) { .contact-dock { right: 10px; bottom: 92px; } .cd-btn { width: 40px; height: 40px; } .cd-btn svg { width: 19px; height: 19px; } .back-top { right: 10px; } }

/* ---------- Trade Performance band (homepage + company profile) ---------- */
.tp-band { background: #fff; border-top: 1px solid #eee; border-bottom: 1px solid #eee; padding: 22px 0; }
.tp-band .container { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.tp-label { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.8125rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); white-space: nowrap; }
.tp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; flex: 1; }
.tp-stat b { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1.375rem; color: var(--ink); line-height: 1.15; }
.tp-stat span { display: block; font-size: 0.7812rem; color: var(--ink-soft); margin-top: 2px; }
.tp-band.cp-tp { border: 1px solid #eee; border-radius: 8px; padding: 18px 20px; margin-bottom: 18px; background: #fff; }
.tp-band.cp-tp .tp-stats { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .tp-stats, .tp-band.cp-tp .tp-stats { grid-template-columns: 1fr 1fr; } }

/* ---------- Product card: price line (B2B) ---------- */
.pcard-terms { font-family: "Roboto", sans-serif; font-weight: 600; font-size: 0.8438rem; color: var(--ink); margin-top: 10px; }
.pcard-terms small { font-family: "Roboto", sans-serif; font-weight: 400; font-size: 0.7812rem; color: var(--ink-soft); }
.pcard-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Product list bottom: trust signals + inquiry entry ---------- */
.plist-trust { padding: 24px 0 30px; background: #fff; border-top: 1px solid #eee; }
.pt-trust-row { text-align: center; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.8438rem; color: var(--ink); letter-spacing: .3px; }
.pt-trust-row .pt-sep { color: var(--accent); margin: 0 10px; }
.pt-inquiry { text-align: center; margin-top: 14px; font-size: 0.9375rem; color: var(--ink-soft); }
.pt-inquiry b { color: var(--ink); font-family: "Poppins", sans-serif; }
.pt-inquiry a { color: var(--accent); font-weight: 600; margin-left: 8px; }
.pt-inquiry a:hover { text-decoration: underline; }

/* ---------- Blog FAQ ---------- */
.blog-faq { padding: 30px 0 16px; background: #fff; }
.blog-faq .faq-item { max-width: 860px; margin: 0 auto 16px; padding: 18px 22px; border: 1px solid #eee; border-radius: 8px; background: #fff; }
.blog-faq .faq-item b { display: block; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.9375rem; color: var(--ink); margin-bottom: 8px; }
.blog-faq .faq-item p { font-size: 0.875rem; line-height: 1.6; color: var(--ink-soft); }
.blog-faq .faq-item a { color: var(--accent); font-weight: 600; }

/* ---------- BEFRAG Diesel topic page ---------- */
.bf-subnav { background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.bf-subnav-in { display: flex; align-items: center; gap: 18px; height: 50px; }
.bf-brand { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1rem; color: var(--ink); letter-spacing: .3px; white-space: nowrap; }
.bf-brand b { color: var(--accent); }
.bf-menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; flex: 1; }
.bf-menu > li { position: relative; }
.bf-menu > li > a { display: block; padding: 15px 14px; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 0.7812rem; letter-spacing: .4px; color: var(--ink); }
.bf-menu > li > a:hover, .bf-menu > li > a.on { color: var(--accent); }
.bf-menu .car { font-size: 0.625rem; margin-left: 3px; }
.bf-drop { position: absolute; top: 100%; left: 0; min-width: 240px; background: #fff; border: 1px solid var(--line); border-radius: 0 0 6px 6px; box-shadow: 0 10px 22px rgba(0,0,0,.1); list-style: none; margin: 0; padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: all .15s ease; }
.bf-has-drop:hover .bf-drop { opacity: 1; visibility: visible; transform: none; }
.bf-drop a { display: block; padding: 6px 16px; font-size: 0.8125rem; color: var(--ink); }
.bf-drop a:hover { background: #fdf2f3; color: var(--accent); }
.bf-subnav-cta { padding: 9px 16px !important; font-size: 0.7812rem !important; flex-shrink: 0; white-space: nowrap; }

/* Compact page head (banner removed) */
.bf-pagehead { padding: 20px 0 16px; }
.bf-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--accent); background: #fdecec; border: 1px solid #f6c9cb; border-radius: 999px; padding: 5px 13px; margin-bottom: 12px; }
.bf-pagehead h1 { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 1.875rem; line-height: 1.2; margin: 0 0 10px; color: var(--ink); }
.bf-pagehead > p:last-child { font-size: 0.9062rem; line-height: 1.6; color: var(--ink-soft); max-width: 880px; margin: 0; }
.btn-outline-white { background: transparent; border: 1.5px solid rgba(255,255,255,.75); color: #fff; }
.btn-outline-white:hover { background: rgba(255,255,255,.12); }

.bf-dealer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.bf-dealer-grid.bf-single { grid-template-columns: 1fr; }
.bf-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.bf-card h3 { font-family: "Poppins", sans-serif; font-size: 1rem; margin: 0 0 12px; color: var(--ink); }
.bf-card ul, .bf-card ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; }
.bf-card li { font-size: 0.875rem; line-height: 1.55; color: var(--ink-soft); }
.bf-card-accent { border-color: #f3c4c6; background: #fffafa; }
.bf-card-accent h3 { color: var(--accent); }
.bf-why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 18px; }
.bf-why-grid .bf-card { padding: 20px 18px; }
.bf-ico { font-size: 1.5rem; display: block; margin-bottom: 8px; }

.bf-ship-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 6px; }
.bf-ship-grid figure { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.bf-ship-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.bf-ship-grid figcaption { padding: 10px 14px; font-size: 0.8125rem; font-weight: 600; color: var(--ink); font-family: "Poppins", sans-serif; }

.bf-cats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 18px; }
.bf-cat { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 16px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.bf-cat:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.08); border-color: #f3c4c6; }
.bf-cat b { display: block; font-family: "Poppins", sans-serif; font-size: 0.875rem; color: var(--ink); margin-bottom: 5px; }
.bf-cat span { font-size: 0.7812rem; color: var(--ink-soft); line-height: 1.45; }

.bf-filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 8px; }
.bf-filterbar input { flex: 1 1 260px; max-width: 380px; border: 1px solid var(--line); border-radius: 5px; padding: 9px 13px; font-size: 0.8438rem; font-family: "Roboto", sans-serif; }
.bf-filterbar input:focus { outline: none; border-color: var(--accent); }
.bf-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 13px; font-size: 0.75rem; font-weight: 600; font-family: "Poppins", sans-serif; color: var(--ink-soft); cursor: pointer; }
.bf-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bf-count { font-size: 0.7812rem; color: var(--ink-soft); margin-bottom: 10px; }
.bf-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bf-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.bf-table th { background: #f7f7f8; text-align: left; font-family: "Poppins", sans-serif; font-size: 0.7812rem; letter-spacing: .4px; text-transform: uppercase; color: var(--ink); padding: 11px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bf-table td { padding: 9px 14px; font-size: 0.8438rem; color: var(--ink-soft); border-bottom: 1px solid #f1f1f3; }
.bf-table tbody tr:last-child td { border-bottom: none; }
.bf-table tbody tr:hover { background: #fffafa; }
.bf-pn { font-weight: 700; color: var(--accent); white-space: nowrap; font-family: "Poppins", sans-serif; font-size: 0.8125rem; }
.bf-table-note { font-size: 0.8438rem; color: var(--ink-soft); margin-top: 12px; }
.bf-table-note a { color: var(--accent); font-weight: 600; }

.bf-gate { display: grid; grid-template-columns: 1fr 1.1fr; gap: 18px; margin-top: 18px; background: #141416; border-radius: 8px; padding: 26px; color: #fff; }
.bf-gate-info h3 { font-family: "Poppins", sans-serif; font-size: 1.125rem; margin: 0 0 14px; }
.bf-gate-info ul { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.bf-gate-info li { font-size: 0.875rem; line-height: 1.6; color: #cfcfcf; }
.bf-gate-info li b { color: #fff; }
.bf-gate-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.bf-gate-meta span { font-size: 0.75rem; font-weight: 600; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 5px 12px; color: #d9d9d9; }
.bf-gate .form-card { background: #fff; color: var(--ink); border: none; }
.bf-unlocked { background: #fff; color: var(--ink); border-radius: 8px; padding: 26px 24px; text-align: center; }
.bf-unlocked-ico { width: 48px; height: 48px; border-radius: 50%; background: #e8f5e9; color: #2e7d32; font-size: 1.375rem; font-weight: 700; display: grid; place-items: center; margin: 0 auto 12px; }
.bf-unlocked h3 { font-family: "Poppins", sans-serif; margin: 0 0 8px; }
.bf-unlocked p { font-size: 0.8438rem; color: var(--ink-soft); margin: 0 0 14px; }
.bf-unlocked-note { font-size: 0.75rem !important; }
.bf-unlocked .btn { display: inline-block; }

.bf-seo-table { margin-top: 16px; }
.bf-seo-notes { display: grid; gap: 8px; margin-top: 14px; }
.bf-seo-notes p { font-size: 0.8438rem; line-height: 1.6; color: var(--ink-soft); background: #fff; border: 1px solid #f1f1f3; border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 14px; margin: 0; }

.bf-install-list { display: grid; gap: 10px; padding-left: 18px; margin: 12px 0 8px; }
.bf-install-list li { font-size: 0.875rem; line-height: 1.65; color: var(--ink-soft); }
.bf-install-list li b { color: var(--ink); }

.bf-rfq-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.bf-rfq-side { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 22px; }
.bf-rfq-side h3 { font-family: "Poppins", sans-serif; font-size: 1rem; margin: 0 0 12px; }
.bf-rfq-side ol { margin: 0; padding-left: 18px; display: grid; gap: 10px; }
.bf-rfq-side li { font-size: 0.8438rem; line-height: 1.6; color: var(--ink-soft); }
.bf-rfq-side li b { color: var(--ink); }
.bf-side-contact { font-size: 0.8125rem; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bf-side-contact a { color: var(--accent); font-weight: 600; }
.bf-file-note { display: none; }  /* upload field removed from the RFQ form */
.form-card input[type="file"] { border: 1px dashed #c9ccd2; border-radius: 5px; padding: 10px 12px; background: #fff; font-size: 0.8125rem; width: 100%; font-family: "Roboto", sans-serif; color: var(--ink); }

/* ---------- BEFRAG: sub-headings, testimonials, product cards ---------- */
.bf-sec-sub { font-size: 0.8438rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; max-width: 780px; }
.bf-sub-h { font-family: "Poppins", sans-serif; font-size: 1.125rem; margin: 34px 0 6px; }
.bf-sla { display: inline-block; margin-left: 8px; background: #fdecec; color: var(--accent); border: 1px solid #f7c9cd; border-radius: 999px; padding: 3px 12px; font-size: 0.7812rem; font-weight: 700; white-space: nowrap; }
.bf-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.bf-quote { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bf-quote blockquote { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--ink); }
.bf-quote figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.bf-quote figcaption b { font-family: "Poppins", sans-serif; font-size: 0.8438rem; }
.bf-quote figcaption span { font-size: 0.7812rem; color: var(--ink-soft); }
.bf-spec-table { margin-top: 10px; }
.bf-spec-table td:first-child { font-weight: 600; color: var(--ink); }
.bf-pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 14px; }
.bf-pcard { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.bf-pcard-img { height: 190px; display: grid; place-items: center; background: #fff; border-bottom: 1px solid var(--line); margin: -18px -18px 0; padding: 10px; }
.bf-pcard-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bf-factory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0 0; }
.bf-factory-grid img { width: 100%; height: 240px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); }
.bf-exploded { margin: 14px 0 0; text-align: center; }
.bf-exploded img { max-width: 420px; width: 100%; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.bf-exploded figcaption { font-size: 0.7812rem; color: var(--ink-soft); margin-top: 8px; }
.bf-pcard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.bf-pcard h4 { margin: 0; font-family: "Poppins", sans-serif; font-size: 0.875rem; line-height: 1.45; color: var(--ink); }
.bf-cat-tag { font-size: 0.7188rem; font-weight: 600; color: var(--ink-soft); background: #f6f6f7; border-radius: 999px; padding: 4px 10px; }
.bf-stock { font-size: 0.6875rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 6px; padding: 4px 9px; white-space: nowrap; }
.bf-stock.in { background: #e8f5e9; color: #2e7d32; }
.bf-stock.fast { background: #fff5e5; color: #b26a00; }
.bf-stock.order { background: #eef2f8; color: #40527a; }
.bf-pcard-meta { display: grid; grid-template-columns: 108px 1fr; gap: 6px 12px; margin: 0; font-size: 0.8125rem; }
.bf-pcard-meta dt { color: var(--ink-soft); }
.bf-pcard-meta dd { margin: 0; color: var(--ink); }
.bf-pcard-price { margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.8125rem; font-weight: 600; color: var(--accent); }
.bf-pcard-pack { margin: 0; font-size: 0.7812rem; color: var(--ink-soft); }
.bf-table td.bf-moq, .bf-table td.bf-lead { color: var(--ink-soft); white-space: nowrap; }
.bf-table .bf-stock { font-size: 0.625rem; padding: 3px 7px; letter-spacing: .2px; }

/* ---------- BEFRAG page: compactness pass (scoped to .bf-page) ---------- */
.bf-page .article-body { padding-bottom: 30px; }
.bf-page .article-body section { padding: 22px 0 4px; scroll-margin-top: 62px; }
.bf-page .article-body h2 { font-size: 1.375rem; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.bf-page .article-body p { line-height: 1.6; margin: 0 0 10px; }
.bf-page .bf-pagehead { padding: 18px 0 14px; }
.bf-page .bf-pagehead h1 { font-size: 1.6875rem; margin: 0 0 8px; }
.bf-page .bf-eyebrow { margin-bottom: 10px; }
.bf-page .bf-card { padding: 16px 16px 14px; }
.bf-page .bf-card h3 { margin: 0 0 8px; font-size: 0.9375rem; }
.bf-page .bf-card ul, .bf-page .bf-card ol { gap: 6px; }
.bf-page .bf-card li { font-size: 0.8438rem; line-height: 1.5; }
.bf-page .bf-ico { font-size: 1.25rem; margin-bottom: 5px; }
.bf-page .bf-dealer-grid { gap: 12px; margin-top: 12px; }
.bf-page .bf-why-grid { gap: 12px; margin-top: 12px; }
.bf-page .bf-why-grid .bf-card { padding: 14px 13px 12px; }
.bf-page .bf-cats-grid { gap: 10px; margin-top: 12px; }
.bf-page .bf-cat { padding: 12px; }
.bf-page .bf-cat b { font-size: 0.8125rem; margin-bottom: 3px; }
.bf-page .bf-cat span { font-size: 0.75rem; }
.bf-page .bf-quotes { gap: 12px; }
.bf-page .bf-quote { padding: 14px; gap: 10px; }
.bf-page .bf-quote blockquote { font-size: 0.8438rem; line-height: 1.55; }
.bf-page .bf-sec-sub { margin: 0 0 12px; }
.bf-page .bf-ship-grid { gap: 12px; margin: 12px 0 4px; }
.bf-page .bf-ship-grid img { aspect-ratio: 3 / 2; }
.bf-page .bf-ship-grid figcaption { padding: 8px 12px; font-size: 0.7812rem; }
.bf-page .bf-filterbar { margin: 12px 0 8px; }
.bf-page .bf-sub-h { margin: 20px 0 6px; font-size: 1rem; }
.bf-page .bf-gate { gap: 18px; margin-top: 12px; padding: 20px; }
.bf-page .bf-rfq-wrap { gap: 18px; margin-top: 12px; }
.bf-page .bf-rfq-side { padding: 16px; }
.bf-page .bf-pcards { gap: 22px; margin-top: 10px; }
.bf-page .bf-pcard { padding: 14px; gap: 9px; }
.bf-page .bf-pcard-img { height: 160px; margin: -14px -14px 0; padding: 8px; }
.bf-page .bf-factory-grid img { height: 220px; }
.bf-page .bf-table th { padding: 9px 12px; }
.bf-page .bf-table td { padding: 7px 12px; font-size: 0.8125rem; }
.bf-page .bf-seo-notes { gap: 6px; margin-top: 10px; }
.bf-page .bf-seo-notes p { padding: 8px 12px; font-size: 0.8125rem; }

@media (max-width: 1080px) {
  .bf-why-grid { grid-template-columns: repeat(2, 1fr); }
  .bf-cats-grid { grid-template-columns: repeat(3, 1fr); }
  .bf-menu > li > a { padding: 15px 9px; font-size: 0.7188rem; }
  .bf-quotes, .bf-pcards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .bf-subnav-in { flex-wrap: wrap; height: auto; padding: 8px 0; }
  .bf-menu { order: 3; flex: 0 0 100%; width: 100%; overflow-x: auto; }
  .bf-pagehead h1 { font-size: 1.4375rem; }
  .bf-dealer-grid, .bf-gate, .bf-rfq-wrap { grid-template-columns: 1fr; }
  .bf-cats-grid { grid-template-columns: repeat(2, 1fr); }
  .bf-ship-grid { grid-template-columns: 1fr; }
  .bf-why-grid { grid-template-columns: 1fr; }
  .bf-quotes, .bf-pcards { grid-template-columns: 1fr; }
  .bf-pcard-meta { grid-template-columns: 96px 1fr; }
  .bf-factory-grid { grid-template-columns: 1fr; }
  .bf-factory-grid img { height: 200px; }
}

/* ---------- Policies page ---------- */
/* Policy pages reuse .container — only the vertical rhythm is page-specific */
.pol-wrap { margin: 0 auto 46px; display: grid; gap: 16px; }
.pol-wrap .cp-card { margin: 0; }
.pol-wrap .cp-head { margin-bottom: 8px; }
.pol-wrap p { font-size: 0.875rem; color: var(--ink); line-height: 1.65; margin: 0; }
.pol-wrap ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.pol-wrap ul li { position: relative; padding-left: 18px; font-size: 0.875rem; color: var(--ink); line-height: 1.6; }
.pol-wrap ul li::before { content: "\2022"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }
.pol-wrap a { color: var(--accent); font-weight: 600; }

.pol-wrap h3 { font-family: "Poppins", sans-serif; font-size: 0.9375rem; font-weight: 600; color: var(--ink); margin: 16px 0 5px; }
.pol-wrap h2 + h3 { margin-top: 4px; }

/* ---------- BEFRAG Authorized Distributor: about copy, gallery, direct PDF download ---------- */
.bf-about-copy { margin-bottom: 18px; }
.bf-about-copy h3,
#bf-about > h3 { font-family: "Poppins", sans-serif; font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin: 0 0 10px; }
#bf-about > h3 { margin: 24px 0 12px; }
.bf-about-copy p { font-size: 0.9062rem; color: var(--ink-soft); line-height: 1.7; margin: 0 0 10px; }
.bf-gallery { display: grid; gap: 14px; }
.bf-pair { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bf-inline-gallery { margin-top: 16px; }
.bf-gallery figure { margin: 0; }
.bf-gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; display: block; }
.bf-gallery figcaption { font-size: 0.75rem; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.bf-tgroup th { background: #f7f8f9; font-family: "Poppins", sans-serif; font-size: 0.7188rem; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-soft); padding: 8px 12px; border: 1px solid var(--line); text-align: left; }
.bf-dl-box { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 16px 0 10px; }
.bf-dl-note { font-size: 0.8125rem; color: var(--ink-soft); }
.bf-dl-note a { color: var(--accent); font-weight: 600; }
.bf-gate.unlocked { grid-template-columns: 1fr; }
.bf-doc { margin-top: 18px; border: 1px solid #e6e8ea; border-radius: 8px; overflow: hidden; background: #fff; }
.bf-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid #ebecee; background: #f7f8f9; }
.bf-doc-head b { font-size: 0.875rem; color: var(--ink); }
.bf-doc-frame { display: block; width: 100%; height: 640px; border: 0; background: #525659; }
.btn.btn-sm { padding: 9px 18px; font-size: 0.8125rem; }
@media (max-width: 720px) { .bf-doc-frame { height: 460px; } }
@media (max-width: 560px) {
  .bf-pair { gap: 8px; }
}

/* ---------- News page (B2B updates) ---------- */
.news-sec { padding: 26px 0 4px; scroll-margin-top: 74px; }  /* deep links land below the sticky header */
.news-sec h2 { font-family: "Poppins", sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--ink); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 2px solid #f0f1f3; }
.news-grid { display: grid; gap: 22px; }
.news-grid-2 { grid-template-columns: repeat(2, 1fr); }
.news-grid-1 { grid-template-columns: 1fr; }
.news-card, .news-feature { background: #fff; border: 1px solid #e9e9e9; border-radius: 8px; overflow: hidden; }
.news-card figure, .news-strip figure { margin: 0; }
.news-card figure img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; }
.news-body { padding: 16px 18px 18px; }
.news-date { display: block; font-size: 0.7188rem; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; }
.news-body h3 { font-family: "Poppins", sans-serif; font-size: 1.0625rem; font-weight: 600; color: var(--ink); margin: 0 0 7px; line-height: 1.35; }
.news-body p { font-size: 0.8438rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.news-body a { color: var(--accent); font-weight: 600; }
.news-feature { display: flex; flex-direction: column; }
.news-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 12px 0; }
.news-strip figure img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; display: block; border-radius: 8px; }
/* single-article section (Company News): image beside the text instead of a full-width banner */
.news-grid-1 .news-card { display: grid; grid-template-columns: 440px minmax(0, 1fr); align-items: stretch; }
.news-grid-1 .news-card figure { height: 100%; }
.news-grid-1 .news-card figure img { height: 100%; aspect-ratio: auto; }
.news-grid-1 .news-card .news-body { align-self: center; padding: 22px 26px; }
@media (max-width: 900px) {
  .news-grid-2 { grid-template-columns: 1fr; }
  .news-grid-1 .news-card { grid-template-columns: 1fr; }
  .news-grid-1 .news-card figure img { height: auto; aspect-ratio: 3 / 2; }
  .news-strip { grid-template-columns: 1fr; }
  .news-strip figure img { aspect-ratio: 4 / 3; height: auto; }
}

/* ---------- Homepage guides/news blocks (mirror TECHNICAL dropdown) ---------- */
.ax-guides { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
/* technical.html hub: only 2 cards -> 2-up layout instead of 4-col with empty slots */
.guides-2 { grid-template-columns: repeat(2, 1fr); }
.guides-2 .ax-cat-img img { object-fit: cover; }
@media (max-width: 560px) { .guides-2 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .ax-guides { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ax-guides { grid-template-columns: 1fr; } }

/* Homepage news section (#blog only): 2x2 grid, full photo + full title.
   Scoped to #blog so technical.html's 4-col Technical library is untouched. */
#blog .ax-guides { grid-template-columns: repeat(2, 1fr); gap: 20px; }
#blog .ax-cat-img { height: auto; aspect-ratio: 3 / 2; overflow: hidden; padding: 0; background: #e9ebee; }
#blog .ax-cat-img img { width: 100%; height: 100%; object-fit: cover; }
#blog .ax-cat-foot { padding: 12px 16px 13px; }
/* Blog cards keep their single-line title — reset the 2-line clamp that the
   shared .ax-cat-foot rule now applies to the category grid. */
#blog .ax-cat-foot b {
  font-size: 0.9688rem; font-weight: 600; flex: 1 1 auto;
  white-space: nowrap; overflow: visible;
  display: block; -webkit-line-clamp: none; -webkit-box-orient: horizontal;
}
@media (max-width: 560px) { #blog .ax-guides { grid-template-columns: 1fr; } }

/* ============================================================
   Technical guides (fitment-guide / installation-guide / faq figures)
   ============================================================ */
.gd-row { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 18px; align-items: start; margin: 12px 0 2px; }
.gd-row.gd-rev { grid-template-columns: 330px minmax(0,1fr); }
.gd-stack { display: grid; gap: 12px; align-content: start; }
.gd-fig { margin: 0; }
.gd-fig img { width: 100%; height: 200px; object-fit: cover; display: block; border: 1px solid var(--line); }
.gd-fig figcaption { font-size: 0.75rem; color: var(--ink-soft); line-height: 1.5; margin-top: 6px; }
.gd-fig-wide { margin: 14px 0 4px; }
.gd-fig-wide img { width: 100%; height: auto; object-fit: contain; background: #fff; }
.gd-steps { display: grid; gap: 22px; }
.gd-step { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 2px 14px; align-items: start; }
.gd-step-num { width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 15px/34px "Poppins", sans-serif; text-align: center; }
.gd-step-main h3 { margin-top: 4px; }
.gd-cause, .gd-fix { margin: 0 0 4px; }
.gd-cause b { color: var(--accent); }
.gd-fix b { color: #2e7d32; }
/* NOTE: selectors are prefixed with `ul` so specificity (0,1,1)/(0,1,2)/(0,2,2) ties with
   .pol-wrap ul li (+::before) and wins via later source order — without this, pages that
   wrap content in .pol-wrap (aftermarket / performance turbocharger) clobber the marker:
   padding-left 30->18px, content "✓"->"•" (red-on-red, invisible), left 0->4px => the red
   circle overlaps the first characters of each list item. */
ul.gd-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
ul.gd-check li { position: relative; padding-left: 30px; font-size: 0.875rem; color: var(--ink); line-height: 1.6; }
ul.gd-check li::before { content: "\2713"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 20px; text-align: center; }
.gd-contact { border: 1px solid var(--line); background: #fbfbfa; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px 26px; align-items: center; font-size: 0.875rem; color: var(--ink); }
.gd-contact b { font-weight: 700; }
@media (max-width: 760px) {
  .gd-row, .gd-row.gd-rev { grid-template-columns: 1fr; }
  .gd-fig img { height: 220px; }
}

/* ============================================================
   Mobile navigation: hamburger + multi-level accordion
   Desktop keeps the hover dropdowns; <=1100px collapses to a panel.
   ============================================================ */
.ax-burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 40px; padding: 0 10px; margin-left: auto;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; flex-shrink: 0;
}
.ax-burger span {
  display: block; height: 2px; width: 100%; background: var(--ink);
  border-radius: 2px; transition: transform .2s ease, opacity .2s ease;
}
.ax-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ax-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ax-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* download item in the BEFRAG panel */
.ax-nav .drop a.drop-dl { font-weight: 600; color: var(--accent-dark); }

@media (max-width: 1200px) {
  .ax-header .container { flex-wrap: wrap; }
  .ax-burger { display: flex; }

  /* collapsed panel */
  .ax-nav {
    display: none; order: 4; width: 100%; margin: 12px 0 2px; padding: 0;
    border-top: 1px solid var(--line);
    max-height: 68vh; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .ax-nav.open { display: block; }
  .ax-nav ul { display: block; }
  .ax-nav li { position: static; width: 100%; }

  /* level 1: top-level items */
  .ax-nav > ul > li > a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 13px 4px; font-size: 0.9062rem; line-height: 1.4;
    border-bottom: 1px solid var(--line);
  }
  .ax-nav li.has-drop > a::after { display: block; font-size: 0.6875rem; opacity: .6; transition: transform .2s ease; }
  .ax-nav li.open.has-drop > a::after { transform: rotate(180deg); }

  /* level 2 + 3: hidden until the branch is expanded */
  .ax-nav .drop, .ax-nav .drop .sub { display: none; }
  .ax-nav li.open > .drop, .ax-nav li.open > .sub { display: block; }

  .ax-nav .drop {
    position: static; min-width: 0; border-top: none; box-shadow: none;
    column-count: auto; background: #fbfbfb; padding: 2px 0 2px 14px;
  }
  .ax-nav .drop > li > a,
  .ax-nav .drop .sub a {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 11px 4px; font-size: 0.8438rem; line-height: 1.45;
    border-bottom: 1px solid var(--line);
  }
  .ax-nav .drop li.has-sub > a::after { display: block; font-size: 0.6875rem; opacity: .5; transition: transform .2s ease; }
  .ax-nav .drop li.open.has-sub > a::after { transform: rotate(90deg); }

  .ax-nav .sub {
    position: static; min-width: 0; border-top: none; background: #f5f5f5;
    padding: 2px 0 2px 14px;
  }
  .ax-nav .drop .sub a { color: var(--ink); font-weight: 500; }
}


/* ---------- BEFRAG support pages (Technical / FAQ) ---------- */
.bf-support-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 12px 0 4px; }
.bf-support-grid .bf-card { padding: 16px 16px 14px; }
.bf-support-grid .bf-card h3 { font-size: 0.875rem; font-weight: 600; margin: 0 0 6px; color: var(--accent); }
.bf-support-grid .bf-card p { font-size: 0.8438rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.bf-steps { counter-reset: bfstep; list-style: none; padding: 0; margin: 10px 0 14px; display: grid; gap: 8px; }
.bf-steps li { position: relative; padding-left: 32px; font-size: 0.875rem; line-height: 1.65; color: var(--ink); }
.bf-steps li::before { counter-increment: bfstep; content: counter(bfstep); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/22px "Poppins", sans-serif; text-align: center; }
.bf-id-table th:first-child { width: 26%; }
.bf-matrix th:first-child { width: 24%; }
.bf-matrix td:first-child { font-weight: 700; color: var(--ink); }
.bf-faq-item { border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px 15px; margin: 0 0 10px; background: #fbfbfa; }
.bf-faq-item h3 { font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--ink); margin: 0 0 6px; }
.bf-faq-item p { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--ink-soft); }
.bf-faq-item a { color: var(--accent); font-weight: 600; }
.bf-page .gd-contact { margin: 12px 0 4px; }
.bf-page .gd-contact a { color: var(--accent); text-decoration: none; }
.bf-page .article-body .bf-table-note a { text-decoration: none; }
@media (max-width: 860px) { .bf-support-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bf-support-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Product detail page — specifications table + product-level FAQ
   ============================================================ */
.pd-addinfo th { width: 34%; }
.pd-faq-list { margin: 4px 0 0; }
.pd-faq-note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pd-faq-note p { margin: 0; font-size: 0.875rem; line-height: 1.7; color: var(--ink-soft); }
.pd-faq-note a { color: var(--accent); font-weight: 600; text-decoration: none; }
@media (max-width: 760px) { .pd-addinfo th { width: 42%; } }

/* ==========================================================================
   TYPOGRAPHY STANDARD — 全站统一字号规范 (single source of truth)
   --------------------------------------------------------------------------
   一级导航            16px / 600  SemiBold
   下拉菜单            15px / 500  Medium       (行高 44px)
   产品标题            17px / 600  SemiBold     (产品卡 / 列表 / 推荐位)
   产品标题·紧凑卡片    16px / 600  SemiBold     (相关产品卡)
   产品参数            13.5px / 400 Regular     (参数表 + 条款行)
   正文·长文           15px / 400  Regular
   正文·紧凑/表格       14px / 400  Regular
   --------------------------------------------------------------------------
   本层只声明 font-size / font-weight，不触碰颜色、间距、边框、栅格、
   导航结构与产品分类，因此不会改变配色和布局骨架。
   使用 !important 让规范具备最终优先级，避免被上方 500+ 处历史声明覆盖。
   回退方式：整体删除本区块即可恢复原状。
   ========================================================================== */
:root {
  --fs-nav-l1: 16px;       --fw-nav-l1: 600;
  --fs-nav-drop: 15px;     --fw-nav-drop: 500;   --lh-nav-drop: 44px;
  --fs-prod-title: 17px;   --fs-prod-title-sm: 13px;  --fw-prod-title: 600;
  --fs-prod-spec: 13.5px;  --fw-prod-spec: 400;
  --fs-body: 15px;         --fs-body-sm: 14px;        --fw-body: 400;
}

/* ---- 1. 一级导航 ---- */
.ax-nav > ul > li > a,
.bf-menu > li > a {
  font-size: var(--fs-nav-l1) !important;
  font-weight: var(--fw-nav-l1) !important;
}

/* ---- 2. 下拉菜单（比一级导航小 1px） ---- */
/* 行高用 :not([class]) 只匹配叶子菜单项，避开折叠面板里 flex 容器化的父级项 */
.ax-nav .drop a:not([class]),
.ax-nav .drop .sub a,
.bf-drop a {
  font-size: var(--fs-nav-drop) !important;
  font-weight: var(--fw-nav-drop) !important;
  line-height: var(--lh-nav-drop) !important;
}
.ax-nav .drop > li > a,
.store-nav .drop a,
.store-nav .drop .sub a {
  font-size: var(--fs-nav-drop) !important;
  font-weight: var(--fw-nav-drop) !important;
}
/* 下载项是叶子链接但带 class（dl-gate / 遗留 drop-dl），单独补行高 */
.ax-nav .drop a.dl-gate,
.ax-nav .drop a.drop-dl { line-height: var(--lh-nav-drop) !important; }
@media (max-width: 1100px) {
  /* 折叠面板里父级项是 flex 容器（高度由 padding 撑开），不套 44px 行高 */
  .ax-nav .drop > li > a { line-height: normal !important; }
}

/* ---- 3. 产品标题 ---- */
.pcard-title,
.pg-card-title,
.card-title,
.bf-pcard h4,
.modal-prod .t {
  font-size: var(--fs-prod-title) !important;
  font-weight: var(--fw-prod-title) !important;
}
/* 相关产品等紧凑卡片 */
.pd-rel-title {
  font-size: var(--fs-prod-title-sm) !important;
  font-weight: var(--fw-prod-title) !important;
}

/* ---- 4. 产品参数 ---- */
.pcard-meta, .pcard-meta b,
.pcard-terms, .pcard-terms small,
.pcard-moq,
.card-meta, .card-meta b,
.card-moq,
.pg-card-moq,
.pd-side-line,
.pd-keyattrs th, .pd-keyattrs td,
.pd-trade th, .pd-trade td,
.pd-addinfo th, .pd-addinfo td,
.bf-spec-table td,
.bf-table th, .bf-table td,
.bf-pn,
.modal-prod .p {
  font-size: var(--fs-prod-spec) !important;
  font-weight: var(--fw-prod-spec) !important;
}

/* ---- 5. 正文 · 长文 15px ---- */
.article-body p, .article-body li,
.pol-wrap p, .pol-wrap ul li,
.pd-desc p, .pd-desc ul li,
.about-text p, .intro-copy p, .cp-intro-text p,
.bf-about-copy p, .bf-install-list li, .bf-steps li, .gd-check li,
.bf-pagehead > p:last-child,
.plist-lead,
.page-sub,
.sec-sub,
.ax-why-copy,
.bf-faq-item p, .pd-faq-note p, .blog-faq .faq-item p, .faq-item p {
  font-size: var(--fs-body) !important;
  font-weight: var(--fw-body) !important;
}

/* ---- 5b. 例外：.pd-desc 内的描述 kicker 不是正文 ----
   PRODUCT DESCRIPTION 必须与 PACKAGE INCLUDES 完全一致（红竖条+加粗大写，
   含行高——.pd-desc p 的 line-height:1.8 会把竖条撑高 4px，这里一并夺回）。 */
.pd-desc p.pd-doc-kicker {
  font-size: 0.9375rem !important;
  font-weight: 800 !important;
  line-height: 1.45 !important;
  letter-spacing: .6px !important;
}

/* ---- 6. 正文 · 紧凑卡片 / 正文表格 14px ---- */
.blog-card p,
.tech-card p,
.bf-card p, .bf-card li, .bf-page .bf-card p, .bf-page .bf-card li,
.bf-support-grid .bf-card p,
.bf-seo-notes p, .bf-page .bf-seo-notes p,
.bf-unlocked p,
.bf-dl-note,
.bf-quote blockquote, .bf-page .bf-quote blockquote,
.eu-item span, .eu-item ul,
.cp-cta p,
.pg-note p,
.news-body p,
.pd-sellpoints li,
.article-body table,
.pd-desc table,
.cp-table,
.bf-table-note,
.info-row b, .info-row span,
.about-facts .info-row b, .about-facts .info-row span {
  font-size: var(--fs-body-sm) !important;
  font-weight: var(--fw-body) !important;
}
/* ===== END TYPOGRAPHY STANDARD ===== */

/* ---------- Unified inquiry submit button (every inquiry form, site-wide) ---------- */
.form-submit {
  display: block; width: 100%; max-width: 100%;
  min-height: 46px; margin: 28px 0 0; padding: 0 20px;
  background: var(--accent); color: #fff; border: none; border-radius: 7px;
  font-family: "Poppins", sans-serif; font-size: 0.875rem; font-weight: 600;
  letter-spacing: .8px; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: background .15s ease;
}
.form-submit:hover { background: var(--accent-dark); }
.form-submit:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.form-submit:disabled { background: var(--accent-dark); opacity: .72; cursor: default; }

/* ---------- Wide screens: logo left, nav packed left right after the logo ---------- */
@media (min-width: 1600px) {
  .ax-nav {
    position: static; transform: none;
    margin: 0; flex: 0 0 auto;
  }
}

/* ---------- Application tiles: photos (replace the SVG vehicle icon) ---------- */
/* Layout contract for this module — the four tiles must read as one aligned row:
   1. Photo area is driven by aspect-ratio (not a fixed px height), so every tile
      scales with the column width and the photos keep their native 16:10 crop.
   2. The text body is a flex column with a uniform min-height, so a one-line
      caption ("Built for more possibilities") and a two-line caption
      ("VNT & GTB turbos for daily driving") still produce the same card height.
   Without both, the tile bottoms and the arrow buttons drift out of alignment. */
.ax-app-tile {
  display: flex; flex-direction: column;
  /* The legacy rule at the top of this file sets align-items:flex-end, which in a
     column flex container would collapse the body to its content width.
     Reset it so the photo and the body both fill the column. */
  align-items: stretch;
  padding: 0; min-height: 0;
}
.ax-app-tile .app-img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10; height: auto;
  object-fit: cover; object-position: center;
  border-radius: 8px 8px 0 0;
  flex: 0 0 auto;
}
.ax-app-tile .ax-app-body {
  position: relative;
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 74px;
  padding: 12px 56px 12px 14px;
  background: linear-gradient(160deg, #f2f3f5 0%, #e8eaee 100%);
  border-radius: 0 0 8px 8px;
}
.ax-app-tile b {
  font-size: 0.9375rem; line-height: 1.3;
}
.ax-app-tile small {
  font-size: 0.75rem; line-height: 1.4; margin-top: 2px;
  /* Keep the caption to two lines max so a long string can never
     stretch one tile taller than its neighbours. */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
/* Anchor the arrow to the body box, not the tile, so it stays optically
   centred on the text block at every breakpoint. */
.ax-app-tile .go {
  top: 50%; bottom: auto; transform: translateY(-50%);
  right: 14px;
}
.ax-app-tile:hover .go { transform: translateY(-50%); }
.ax-app-tile svg.veh { display: none; }

/* Narrower columns: a fixed body min-height is not needed once the caption
   is clamped, but the photo must not become letterbox-thin. */
@media (max-width: 900px) {
  .ax-app-tile .app-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .ax-app-tile .app-img { aspect-ratio: 21 / 9; }
  .ax-app-tile .ax-app-body { min-height: 68px; padding: 11px 52px 11px 13px; }
}

/* ============================================================
   Ultra-wide compensation (>=1600px)
   The container is now fluid up to 1920px, so the old 3/4-up
   grids would stretch each card to 400px+. Add one more column
   on very wide screens to keep card widths in a readable band.
   ============================================================ */
@media (min-width: 1600px) {
  .grid, .pgrid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* The category module ships exactly 12 tiles. Bumping to 8 tracks split them
     8 + 4 — a lopsided pair of rows with four dead slots on the second line.
     12 divides evenly into 6 (6 + 6), 4 (4 + 4 + 4) and 3, so the ultra-wide
     breakpoint keeps 6 tracks and instead caps the row width, which preserves
     the card size and the symmetric 2 x 6 measure seen at 1120-1599px. */
  .ax-cats-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    max-width: 1500px; margin: 0 auto;
  }
  /* The Applications module ships exactly 4 tiles. Switching it to 5 columns
     here would leave a dead 5th slot and push the row off the page grid, so it
     stays 4-up; the row is instead width-capped and centred to match the
     other modules' measure. */
  .ax-app-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 1500px; margin: 0 auto;
  }
  .bf-band-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tech-grid, .eq-grid, .eu-grid, .cp-certs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cp-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cap-stats, .ptn-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* The hero icon strip ships exactly 4 tiles. Forcing 5 tracks here left a
     dead 5th slot, so the four items clustered into the left 80% of the strip
     with a blank block hanging off the right edge. 4 divides the strip evenly,
     so the tiles stay symmetric and the row just gets a little more breathing
     room per column. */
  .tb-features { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qc-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Keep long-form reading measure comfortable */
  .plist-lead, .pd-desc p, .pd-desc ul, .pd-oe-plain, .pd-oe-extra, .pd-fit-note {
    max-width: 1100px;
  }
  .sec-sub { max-width: 900px; }
}

/* ---------- BEFRAG band: 10 product cards, 2 rows x 5 (2026-10-21) ----------
   The band shipped with five cards in one row. It now carries ten, so the
   desktop grid keeps 5 tracks and simply wraps to a second row; the copy
   column is narrowed so a 5-up card row stays above the ~200px per-card
   width where titles stop wrapping to three lines. */
.bf-band-grid { grid-template-columns: 340px 1fr; gap: 32px; }
.bf-band-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 14px; }
.bf-band .bf-pcard { padding: 9px 9px 11px; }
.bf-band .bf-pcard-name { font-size: 0.7188rem; line-height: 1.38; padding-top: 8px; }
@media (max-width: 1500px) {
  .bf-band-grid { grid-template-columns: 1fr; gap: 28px; }
  .bf-band-copy { max-width: 660px; margin: 0 auto; text-align: center; }
  .bf-band-logo { justify-content: center; }
}
@media (max-width: 1199px) {
  /* ten cards divide evenly into 5 rows of 2; a 3-up track would leave the
     tenth card orphaned on a half-empty last row */
  .bf-band-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* the 5-card era used span-2 tracks + nth-child offsets to centre a 3+2
     wrap; those offsets would now scatter cards across a 2-up grid */
  .bf-band .bf-pcard,
  .bf-band .bf-pcard:nth-child(4),
  .bf-band .bf-pcard:nth-child(5),
  .bf-band .bf-pcard:nth-child(10) { grid-column: auto; }
}
@media (max-width: 767px) {
  .bf-band-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .bf-band .bf-pcard-name { font-size: 0.7188rem; }
}
/* ---------- BEFRAG band: square cards + two-line titles (2026-10-21) ----------
   The band shipped with ten 16:9 photo wells whose captions ran to one, two or
   three lines, so the row never shared a baseline and the frames read as ten
   different rectangles. Two changes fix that:
     - the card itself is the unit now: aspect-ratio 1/1, photo well flexes to
       fill whatever the caption leaves, so all ten boxes are the same square;
     - every caption is a fixed two-line block (product type / model codes) at
       one size and one line-height, so the text grid is identical card to card.
   The photo keeps object-fit: contain on white -- letterboxing an already
   white-backed product shot is invisible, where `cover` would crop the part. */
.bf-band .bf-pcard {
  aspect-ratio: 1 / 1;
  padding: 9px 9px 10px;
  gap: 0;
  overflow: hidden;
}
/* flex-basis 0 so the well absorbs the leftover height of the square instead
   of being driven by the image's own 16:9 ratio */
.bf-band .bf-pcard-img {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  aspect-ratio: auto;
  height: auto;
  border-radius: 4px;
}
.bf-band .bf-pcard-name {
  flex: 0 0 auto;
  margin: 0;
  padding-top: 9px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  min-height: 50px;
  font-size: 0.8125rem;
  line-height: 1.34;
  text-align: center;
}
.bf-band .bf-pcard-name .bf-pcard-t1 {
  display: block;
  width: 100%;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: .2px;
  color: #1f1f1f;
}
.bf-band .bf-pcard-name .bf-pcard-t2 {
  display: block;
  width: 100%;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: .3px;
  color: #7A7A7A;
}
@media (max-width: 1500px) {
  .bf-band-grid { grid-template-columns: 1fr; gap: 28px; }
  .bf-band-copy { max-width: 660px; margin: 0 auto; text-align: center; }
  .bf-band-logo { justify-content: center; }
}
@media (max-width: 1199px) {
  /* two square cards across a full-width row would be ~550px tall each, so the
     grid is capped and centred: same 2x5 rhythm, sane card size */
  .bf-band-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .bf-band .bf-pcard,
  .bf-band .bf-pcard:nth-child(4),
  .bf-band .bf-pcard:nth-child(5),
  .bf-band .bf-pcard:nth-child(10) { grid-column: auto; }
}
@media (max-width: 767px) {
  .bf-band-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .bf-band .bf-pcard { padding: 7px 7px 8px; }
  .bf-band .bf-pcard-name { font-size: 0.75rem; gap: 2px; min-height: 42px; padding-top: 7px; }
  .bf-band .bf-pcard-name .bf-pcard-t1 { font-size: 0.8125rem; }
  .bf-band .bf-pcard-name .bf-pcard-t2 { font-size: 0.6875rem; }
}