/**
 * FuelPartsDB — Calm & Authoritative Industrial Color Palette
 * 沉稳哑光质感调色板
 *
 * 这个文件覆盖全局基础样式，统一全站视觉风格。
 *
 * 注意：本文件最后加载，部分规则确实使用了 !important 来压制
 * legacy.css / 页面内联样式中的既有定义。这是历史遗留的层叠问题，
 * 新增样式请优先使用更具体的选择器，避免继续叠加 !important。
 */
/* ============================================
   1. Global — 清爽哑光灰背景
   ============================================ */


:root {
  --bg-main: #f1f5f9;
  --bg-card: #ffffff;
  --border-card: #cbd5e1;
  --text-primary: #1e293b;
  --color-navy: #162a42;
  --color-navy-border: #233c58;
  --color-amber: #c27803;
  --color-amber-hover: #a36100;
  --color-sku-bg: #233c58;
  --color-sku-border: #365377;
  --color-sku-text: #e2e8f0;
}

body {
  background-color: var(--bg-main);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ============================================
   2. Cards — 扁平哑光卡片
   ============================================ */


.section-card,
.sidebar-card,
.product-card,
.related-product-card,
.article-content-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.section-card:hover,
.product-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 4px 0 rgba(15, 23, 42, 0.06);
}
/* ============================================
   3. Hero Sections — 深色沉稳海军蓝
   ============================================ */


/* Orphan arms dropped from the hero groups below (.product-hero, .archive-hero,
   .knowledge-hero, .rfq-hero, .hero, .vehicle-hero, and the matching titles/
   tags): none appears in the built HTML, so those selectors could never match.
   The live arms (.search-hero, .article-hero, .page-hero,
   .article-title, .hero-title, .page-hero .hero-title) are untouched — they
   are why the rule is kept rather than deleted. */

.search-hero,
.article-hero,
.page-hero {
  background: var(--color-navy);
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid var(--color-navy-border);
  color: #ffffff;
}

.hero-title,
.article-title,
.page-hero .hero-title {
  color: #ffffff;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============================================
   4. Typography — 工程数字与标题
   ============================================ */


.section-title-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  color: var(--color-amber);
  letter-spacing: 0.04em;
}

.section-title,
.guide-h2 {
  color: #0f2439;
  font-weight: 700;
  letter-spacing: -0.01em;
}
/* ============================================
   5. Buttons — 沉稳工业琥珀色按钮
   ============================================ */
/* `.btn-accent` was dropped from both selector groups below. It appears in no
   .astro file and in 0 bytes of built HTML — the same orphaned enquiry-CTA
   cleanup as `.nav-cta` and `.cta-btn`. The remaining two arms are live
   (`.btn-quote` ships 29 times, `.search-box button` once), so only the dead
   arm was removed rather than the whole rule. */



.btn-quote {
  background: var(--color-amber);
  color: #ffffff;
  border: 1px solid #b45309;
  box-shadow: none;
  border-radius: 6px;
  font-weight: 700;
  transition: background 0.15s ease;
}

.btn-quote:hover {
  background: var(--color-amber-hover);
  color: #ffffff;
}
/* `.btn-view-details` removed — same orphan class, 0 hits in built HTML. */
/* ============================================
   6. Tables — 精密表格哑光质感
   ============================================ */



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

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

.data-table tbody tr:hover td,
.vehicle-row:hover {
  background-color: #f1f5f9;
}

.engine-family-badge,
.emission-badge {
  background: #e2e8f0;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-weight: 600;
  border-radius: 4px;
}
/* ============================================
   7. Callout Boxes — 沉稳提示框
   ============================================ */


.callout-box.callout-warning {
  background: #fefce8;
  border: 1px solid #fde047;
  border-radius: 6px;
  box-shadow: none;
}

.callout-box.callout-info {
  background: #f0f4f8;
  border: 1px solid #cbd5e1;
  color: var(--color-navy);
  border-radius: 6px;
}
/* ============================================
   8. Sidebar & Form Inputs
   ============================================ */


.sidebar {
  position: sticky;
  top: 84px;
}

.sidebar-card-header {
  background: var(--color-navy);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* `.form-input` / `.form-textarea` arms removed — no form component renders
   them any more; only `.sidebar-card input/textarea` is live. */
.sidebar-card input,
.sidebar-card textarea {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #1e293b;
  border-radius: 6px;
  box-shadow: none;
}

.sidebar-card input:focus,
.sidebar-card textarea:focus {
  border-color: var(--color-navy);
  box-shadow: 0 0 0 2px rgba(22, 42, 66, 0.12);
  outline: none;
}
/* ============================================
   9. FAQ Accordion — 哑光极简
   ============================================ */


.fpdb-faq-item {
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  box-shadow: none;
}

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

.fpdb-faq-item summary:hover {
  color: var(--color-navy);
}
/* ============================================
   10. SKU Section Box — 产品SKU突出框
   ============================================ */


.card-sku-section,
.card-sku-box {
  background: linear-gradient(135deg, #162a42 0%, #1e3a5f 100%);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.card-sku-section::before,
.card-sku-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}
/* ============================================
   11. Section Spacing — 区块间距
   ============================================ */
/* `.section` is a SHARED class with two very different users:
     - index.astro      — full-bleed homepage bands, which WANT the
                          `padding: var(--space-3xl) 0` (64px) that
                          modern-fpdb.css:613 gives them;
     - product/[slug]   — card-style blocks, which do NOT.
   Because modern-fpdb.css declares `.section { padding: 64px 0 }` and loads
   BEFORE polish.css, product-page sections inherited 64px of top AND bottom
   padding on top of their own 32px margin. Two adjacent sections therefore
   sat 160px apart (32 margin + 64 bottom + 64 top) — the block spacing read as
   broken rather than deliberate.

   Same collision hit `.section-header`, which modern-fpdb.css:620 declares as
   `text-align: center` for the homepage's centred section intros. On the
   product page the header is a left-aligned badge + title row, so `text-align`
   was simply wrong there (invisible only because the row is `display: flex`,
   which left-aligns its items and masks the inherited alignment).

   Rather than alter `.section` globally (which would flatten the homepage's
   intentional band spacing), neutralise both declarations only where the
   product page's card layout is in play. `.section-spaced` is used by the
   product page alone, so it is the correct hook.

   Product-page blocks are visually separated by the card's own border/radius,
   so margin alone carries the rhythm — 32px is kept as the intentional gap. */



.section-spaced {
  margin-bottom: 32px;
  padding-top: 0;
  padding-bottom: 0;
}

.section-spaced > .section-card > .section-header {
  text-align: left;
}

.container-breadcrumb {
  padding-top: 16px;
}
/* ============================================
   12. Table Wrapper & Responsive Table Container
   ============================================ */


.table-wrapper,
.table-responsive,
.table-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #ffffff 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, #ffffff 30%, rgba(255, 255, 255, 0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}

.table-wrapper::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar,
.table-scroll-wrap::-webkit-scrollbar {
  height: 5px;
}

.table-wrapper::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track,
.table-scroll-wrap::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb,
.table-scroll-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover,
.table-responsive::-webkit-scrollbar-thumb:hover,
.table-scroll-wrap::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
/* ============================================
   13. Spec Key — 表格中的规格键
   ============================================ */


.spec-key-label {
  font-weight: 600;
  color: #475569;
  width: 35%;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
}
/* ============================================
   14. Engine Family Badge — 引擎族徽章变体
   ============================================ */


.engine-family-badge--blue {
  background: #e0f2fe;
  color: #0369a1;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.engine-family-badge--amber {
  background: #fef3c7;
  color: #92400e;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}
/* ============================================
   15. FAQ Item Details/Summary — 完整FAQ样式
   ============================================ */


.fpdb-faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 8px;
  background: #f8fafc;
  padding: 12px 16px;
}

.fpdb-faq-item summary {
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1e293b;
  list-style: none;
}

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

.faq-question-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.faq-q-icon {
  width: 20px;
  height: 20px;
  background: #1a3a5c;
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
  flex-shrink: 0;
}

.faq-answer-content {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e2e8f0;
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  padding-left: 30px;
}
/* ============================================
   16. Related Products Grid
   ============================================ */


.related-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.related-product-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  background: #fff;
}

.related-product-card .related-category {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 4px;
}

.related-product-card .related-sku-link {
  font-size: 15px;
  font-weight: 700;
  color: #1a3a5c;
  text-decoration: none;
  display: block;
}

.related-product-card .related-sku-link:hover {
  color: #f59e0b;
}

/* A cross-reference entry whose SKU is NOT in this catalogue.
   It must read as information, not as a link — the previous render made these
   real anchors to non-existent product pages, which is how 29 product pages
   shipped 122 dead links. Muted and non-interactive. */
.related-product-card .related-sku-link.is-unlinked {
  color: #475569;
  font-weight: 600;
  cursor: default;
}

.related-product-card .related-note {
  font-size: 12px;
  color: #64748b;
  margin-top: 6px;
  line-height: 1.4;
}

/* Intro line under a section heading — explains what the block contains. */
.section-intro {
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
  margin: 0 0 14px;
}

/* ============================================
   17. Sidebar Sub-Components
   ============================================ */

.sidebar-card-spacing {
  margin-bottom: 20px;
}
/* Quick Specs */


.quick-specs-list {
  margin: 0;
  padding: 0;
}

.quick-specs-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
}

.quick-specs-row:last-child {
  border-bottom: none;
}

.quick-specs-label {
  color: #64748b;
  font-weight: 500;
}

.quick-specs-value {
  margin: 0;
  color: #1e293b;
  font-weight: 600;
  text-align: right;
}
/* ============================================
   18. Installation Steps
   ============================================ */


.installation-tools {
  margin-bottom: 16px;
}

.installation-steps {
  padding-left: 20px;
  margin-bottom: 20px;
  line-height: 1.7;
}

.installation-steps > li {
  margin-bottom: 6px;
}

.installation-callout {
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 16px;
  border-radius: 8px;
}

.installation-callout-title {
  display: block;
  margin-bottom: 8px;
  color: #92400e;
}

.installation-callout-list {
  margin: 0;
  padding-left: 18px;
  color: #78350f;
  font-size: 13px;
  line-height: 1.6;
}
/* ============================================
   19. Knowledge Sidebar Widget — 知识库sidebar widget
   ============================================ */


.sidebar-widget {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin-bottom: 24px;
  overflow: hidden;
}

.sidebar-guide-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-guide-item {
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.sidebar-guide-item:last-child {
  border-bottom: none;
}

.sidebar-guide-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sidebar-guide-link:hover {
  color: var(--color-amber);
}

.sidebar-callout-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  font-size: 13px;
  color: #78350f;
}
/* Content Inline Tags - 文章中的彩色标签 */


.tag-optimal {
  color: #10b981;
  font-weight: 700;
}

.tag-acceptable {
  color: #b45309;
  font-weight: 700;
}

.tag-failed {
  color: #dc2626;
  font-weight: 700;
}

.tag-warning {
  color: #b45309;
  font-weight: 700;
}

.tag-primary {
  color: var(--color-navy);
  font-weight: 700;
}

.callout-spaced {
  margin-top: 16px;
}

.content-list {
  padding-left: 20px;
  line-height: 1.7;
  font-size: 13.5px;
  color: #1e293b;
  margin: 0;
}

/* ============================================
   20. Mobile Form Controls (>=16px to prevent iOS auto-zoom)
   ============================================ */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
  select,
  textarea,
  .hero-search-input,
  .h-search-input,
  .dropdown-quick-search,
  .fitment-filter-input,
  .kb-filter-input,
  .vehicle-search-field,
  .form-input,
  .thread-select {
    font-size: 16px !important;
  }
}