/**
 * FuelPartsDB — Legacy Styles (Curated)
 *
 * 仅保留 .astro 页面和组件实际使用到的样式。
 * 旧的 fpdb-styles.css (7000+ 行) 包含大量未使用的样式，已被替换。
 *
 * 加载顺序：modern-fpdb.css → legacy.css → polish.css
 *
 * 注意：本文件是设计令牌（:root 变量）的权威定义，后加载的 polish.css
 * 会覆盖此处的部分样式。modern-fpdb.css 中的同名变量为历史遗留，
 * 已与本文件保持同步，改动时请以本文件为准。
 *
 * 版心（容器宽度）：全站统一以 `.container` 为准 ——
 *   max-width: var(--container-max) = 1280px，水平内边距 var(--space-lg)。
 *   任何页面级包裹容器都应复用这两个变量，不要再硬编码宽度，
 *   否则会出现两条基准线错位（产品页曾因此在 1440px 下错开 60px）。
 */
/* ============================================================
   1. CSS Variables (from old fpdb-styles.css)
   ============================================================ */


:root {
  --primary: #1a3a5c;
  --primary-dark: #0f2440;
  --primary-light: #234b73;
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-light: #fbbf24;

  --bg: #f4f7fb;
  --bg-white: #ffffff;
  --bg-soft: #f8fafc;
  --bg-alt: #eef1f6;
  --bg-row: #eef1f6;
  --bg-row-alt: #e8ebf0;

  --text: #1a1a1a;
  --text-secondary: #475569;
  --text-muted: #64748b;

  --border: #d1d9e6;
  --border-strong: #b8c4d4;

  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;

  --badge-primary: #1a3a5c;
  --badge-oem: #d97706;
  --badge-aftermarket: #64748b;

  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;
  --radius-pill: 12px;

  --shadow-sm: 0 1px 3px rgba(26, 58, 92, 0.07);
  --shadow-md: 0 4px 12px rgba(26, 58, 92, 0.10);
  --shadow: 0 18px 44px rgba(15, 36, 64, 0.08);
  --shadow-lg: 0 28px 64px rgba(15, 36, 64, 0.12);

  --font-body: 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Barlow Condensed', 'Roboto Slab', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --container: 1280px;
  --gap: 20px;
}
/* ============================================================
   2. Page Layout (product / article)
   ============================================================ */


.page-body {
  padding: 40px 0 72px;
}

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  align-items: start;
}



.page-main {/* Vertical padding only. The horizontal 20px used to stack on top of
     .fpdb-sku-container's own padding, pushing the content a further 20px
     right of the breadcrumb. The wrapper already provides the gutter. */
  flex: 1;
  min-width: 0;

  padding: 56px 0 72px;
}

.fpdb-sku-container {/* Aligned to the breadcrumb chain.
     The breadcrumb above uses `.container` (max-width 1280px, padding 24px),
     while this wrapper used to hardcode 1200px / 20px. Two different widths
     meant the two content chains started from different left edges — measured
     60px apart at 1440px, 20px at 1024px. Both now share the same box model,
     so the breadcrumb and the content below it line up.
     Only used on the product page (src/pages/product/[slug].astro). */

  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.fpdb-breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  padding: 14px 0;
}

.fpdb-breadcrumb a {
  color: var(--primary-light);
}

@media (hover: hover) and (pointer: fine) {
  .fpdb-breadcrumb a:hover {
    color: var(--primary);
  }
}
/* ============================================================
   3. Section Card (product page sections)
   ============================================================ */


.section {
  margin-bottom: 40px;
}

.section:last-child {
  margin-bottom: 0;
}

.section-card {
  background: #ffffff;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: 0 1px 4px rgba(26, 58, 92, 0.07), 0 1px 2px rgba(26, 58, 92, 0.04);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.2px;
}

.section-title-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--accent);
  background: rgba(245, 158, 11, 0.1);
  padding: 2px 8px;
  border-radius: 2px;
  border: 1px solid rgba(245, 158, 11, 0.2);
}
/* ============================================================
   4. Callout Box (warning / info)
   ============================================================ */


.callout-box {
  background: #fffbeb;
  border-left: 4px solid var(--accent);
  padding: 16px 20px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin: 20px 0;
}

.callout-box.callout-warning {
  background: #fefce8;
  border-left-color: #ca8a04;
}

.callout-box.callout-info {
  background: #f0f4f8;
  border-left-color: var(--primary);
}

.callout-title {
  font-weight: 700;
  color: var(--primary-dark);
  margin-bottom: 8px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.callout-box.callout-warning .callout-title {
  color: #92400e;
}

.callout-box.callout-info .callout-title {
  color: var(--primary-dark);
}
/* ============================================================
   5. Injector Tiers (4-tier grouping for cross-reference)
   ============================================================ */


.injector-tiers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.injector-tier-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(26, 58, 92, 0.06);
}

.injector-tier-label {
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
}

.tier-primary .injector-tier-label {
  background: var(--badge-primary);
}

.tier-oem .injector-tier-label {
  background: var(--badge-oem);
}

.tier-aftermarket .injector-tier-label {
  background: var(--badge-aftermarket);
}

.tier-dlla .injector-tier-label {
  background: var(--warning);
}

.injector-tier-codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  background: var(--bg-alt);
}

.injector-code-pill {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 2px;
}

.tier-primary .injector-code-pill {
  background: rgba(26, 58, 92, 0.08);
  color: var(--primary);
}

.tier-oem .injector-code-pill {
  background: rgba(217, 119, 6, 0.1);
  color: #92400e;
}

.tier-aftermarket .injector-code-pill {
  background: rgba(71, 85, 105, 0.1);
  color: #475569;
}

.tier-dlla .injector-code-pill {
  background: rgba(245, 158, 11, 0.1);
  color: #92400e;
}
/* DLLA Tags */
/* ============================================================
   6. Data Table (vehicle fitment / technical specs)
   ============================================================ */



.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.data-table th {
  background: var(--primary);
  color: #f8fafc;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 14px;
  text-align: left;
  border: none;
}

.data-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #e2e8f0;
  color: #334155;
}

@media (hover: hover) and (pointer: fine) {
  .data-table tbody tr:hover td {
    background-color: #f8fafc;
  }
}
/* ============================================================
   7. Engine Family Badge
   ============================================================ */


/* `.engine-badge` arm removed — only `.engine-family-badge` is ever rendered. */
.engine-family-badge {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  background: #e2e8f0;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  display: inline-block;
}
/* ============================================================
   8. Related Product Cards
   ============================================================ */


.related-product-card {
  font-size: 13px;
  transition: border-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
  .related-product-card:hover {
    border-color: #94a3b8 !important;
  }
}
/* ============================================================
   9. Sidebar (product page)
   ============================================================ */


.sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
  min-width: 0;
}

.sidebar-card {
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(26, 58, 92, 0.07);
}

.sidebar-card-header {
  background: var(--primary);
  color: #fff;
  padding: 10px 16px;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidebar-card-header svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.sidebar-card-body {
  padding: 16px;
}
/* Sidebar specs table */
/* Sidebar CTA buttons */
/* ============================================================
   10. FAQ Accordion
   ============================================================ */




.fpdb-faq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fpdb-faq-item {
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fpdb-faq-item[open] {
  background: #ffffff;
  border-color: #94a3b8;
}

.fpdb-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--primary-dark);
  padding: 12px 16px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fpdb-faq-item summary::-webkit-details-marker {
  display: none;
}

.fpdb-faq-item summary::after {
  content: '+';
  font-size: 20px;
  color: var(--primary);
  font-weight: 400;
  transition: transform 0.2s;
}

.fpdb-faq-item[open] summary::after {
  content: '−';
}

@media (hover: hover) and (pointer: fine) {
  .fpdb-faq-item summary:hover {
    color: var(--primary);
  }
}

.fpdb-faq-item > div,
.fpdb-faq-item > p {
  padding: 0 16px 14px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.65;
}
/* ============================================================
   11. Hero Sections (used by all pages with deep blue gradient)
   ============================================================ */


.page-hero {
  padding: 48px 0 56px;
  background: linear-gradient(135deg, #162a42 0%, #0f1d32 100%);
  position: relative;
  overflow: hidden;
  border-bottom: none;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
/* ============================================================
   12. Article & RFQ Hero (deep navy card)
   ============================================================ */


/* Dead arms pruned (.product-hero, .archive-hero, .knowledge-hero, .rfq-hero —
   0 hits in the built HTML). `.search-hero` and `.article-hero` are live and
   are why this rule survives. */
.search-hero,
.article-hero {
  background: #162a42;
  border-radius: var(--radius-lg);
  box-shadow: none;
  border: 1px solid #233c58;
  color: #ffffff;
  padding: 32px;
}
/* ============================================================
   13. Product Hero Card (product page SKU header)
   ============================================================ */


.product-hero-card {
  background: linear-gradient(135deg, #162a42 0%, #101f33 100%);
  color: #ffffff;
  border-radius: 8px;
  border: 1px solid #1e3a5f;
  padding: 26px 30px;
  margin-bottom: 32px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
}

.hero-main-title {
  font-size: 1.7rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.28;
  margin: 0 0 8px 0;
  letter-spacing: -0.01em;
}

.hero-sub-meta {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 20px;
  line-height: 1.5;
}

@media (max-width: 768px) {
  .product-hero-card {
    padding: 20px 16px;
  }
  .hero-main-title {
    font-size: 1.35rem;
  }
}
/* ============================================================
   15. Pagination
   ============================================================ */
/* ============================================================
   16. Forms (general)
   ============================================================ */
/* ============================================================
   17. Responsive Layout for product page
   ============================================================ */




@media (max-width: 992px) {
  .page-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }
}

@media (max-width: 768px) {
  .page-main {
    padding: 36px 0 52px;
  }
/* Follows .container's spacing (20px via --space-lg at this breakpoint)
     instead of a hardcoded 16px, so the breadcrumb and content stay aligned
     on small screens too. */



  .fpdb-sku-container {
    padding: 0 var(--space-lg);
  }

  .section-card {
    padding: 20px 16px;
  }

  .data-table {
    font-size: 12px;
  }

  .data-table th,
  .data-table td {
    padding: 8px 10px;
  }
}