/* Extracted from catalog-public.html */

/* ── Reset ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scrollbar-width: none; }
    html::-webkit-scrollbar { width: 0; }

    body {
      font-family: var(--font-body);
      background: var(--color-bg-base);
      color: var(--color-text-primary);
      line-height: var(--leading-body);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }
    a { color: var(--color-text-accent); text-decoration: none; }
    a:hover { text-decoration: underline; }

    /* ==========================================================================
       HEADER — Glassmorphism sticky (matches landing)
       ========================================================================== */

    .site-header {
      position: sticky; top: 0;
      z-index: var(--z-sticky);
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      border-bottom: 1px solid var(--glass-border);
    }
    .site-header .inner {
      max-width: var(--content-xl); margin: 0 auto;
      padding: 0 var(--space-6);
      display: flex; align-items: center; justify-content: space-between;
      height: 56px;
    }
    .logo {
      font-family: var(--font-heading); font-size: var(--text-h5);
      font-weight: var(--heading-weight-primary);
      color: var(--color-text-accent);
      text-transform: uppercase; letter-spacing: var(--tracking-wide);
      text-decoration: none;
      position: relative;
    }
    .logo::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0; right: 0;
      height: 2px;
      background: var(--gradient-accent);
      border-radius: 1px;
      opacity: 0.5;
      filter: blur(1px);
    }
    .header-right { display: flex; gap: var(--space-3); align-items: center; }

    /* ── Catalog mode toggle (OEM / Local) ── */
    .mode-toggle {
      display: inline-flex;
      padding: 3px;
      background: var(--glass-bg);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px dashed var(--glass-border);
      border-radius: var(--radius-md);
      gap: 2px;
    }
    .mode-toggle button {
      background: transparent;
      border: none;
      color: var(--color-text-muted);
      padding: 4px 12px;
      border-radius: calc(var(--radius-md) - 3px);
      font-family: var(--font-mono);
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      cursor: pointer;
      transition: all 0.2s var(--ease-out);
    }
    .mode-toggle button:hover {
      color: var(--color-text-accent);
    }
    .mode-toggle button.is-active {
      background: var(--color-primary-muted);
      color: var(--color-text-accent);
      box-shadow: 0 0 12px var(--glow-color-soft);
    }

    .theme-toggle {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      background: transparent;
      border: 1px dashed var(--glass-border);
      border-radius: var(--radius-md);
      color: var(--color-text-muted);
      cursor: pointer; font-size: 1rem;
      transition: var(--transition-fast);
    }
    .theme-toggle:hover {
      border-color: var(--color-border-accent);
      color: var(--color-text-accent);
      box-shadow: 0 0 12px var(--glow-color-soft);
    }
    .header-back {
      font-size: var(--text-body-sm);
      color: var(--color-text-secondary);
      text-decoration: none;
      transition: color 0.2s;
    }
    .header-back:hover { color: var(--color-text-accent); text-decoration: none; }

    /* ==========================================================================
       SEARCH BAR — Glass style
       ========================================================================== */

    .search-bar {
      max-width: var(--content-xl); margin: 0 auto;
      padding: var(--space-4) var(--space-6);
    }
    .search-wrapper {
      display: flex; gap: var(--space-2);
    }
    .search-wrapper input {
      flex: 1;
      padding: var(--space-3) var(--space-4);
      background: var(--glass-bg);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      color: var(--color-text-primary);
      font-family: var(--font-body);
      font-size: var(--text-body);
      outline: none;
      transition: all 0.25s var(--ease-out);
    }
    .search-wrapper input:focus {
      border-color: var(--color-border-focus);
      box-shadow: 0 0 0 3px var(--glow-color-soft), 0 0 20px var(--glow-color-soft);
    }
    .search-wrapper input::placeholder { color: var(--color-text-muted); }

    /* 3D search button */
    .search-wrapper button {
      padding: var(--space-3) var(--space-5);
      background: var(--gradient-accent);
      color: var(--btn-primary-text);
      border: none; border-radius: var(--radius-md);
      font-family: var(--font-body); font-size: var(--text-body);
      font-weight: var(--font-weight-semibold); cursor: pointer;
      transition: all 0.25s var(--ease-out);
      box-shadow: 0 3px 0 var(--color-primary-active),
                  0 4px 10px var(--glow-color-soft);
      position: relative;
      overflow: hidden;
    }
    .search-wrapper button:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 0 var(--color-primary-active),
                  0 8px 20px var(--glow-color);
    }
    .search-wrapper button:active {
      transform: translateY(1px);
      box-shadow: 0 1px 0 var(--color-primary-active);
    }
    /* Shimmer */
    .search-wrapper button::after {
      content: '';
      position: absolute;
      top: 0; left: -100%; width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
      transition: left 0.5s ease;
    }
    .search-wrapper button:hover::after { left: 120%; }

    /* ==========================================================================
       REGION BAR — Glass pills
       ========================================================================== */

    .region-bar {
      background: var(--glass-bg);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--glass-border);
      padding: var(--space-2) 0;
    }
    .region-inner {
      max-width: var(--content-xl); margin: 0 auto;
      padding: 0 var(--space-6);
      display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    }
    .region-label {
      font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
      color: var(--color-text-muted); text-transform: uppercase;
      letter-spacing: var(--tracking-widest); margin-right: var(--space-2);
      font-family: var(--font-mono);
    }
    .region-btn {
      background: transparent;
      border: 1px dashed var(--glass-border);
      color: var(--color-text-muted);
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-md); cursor: pointer;
      font-size: var(--text-caption);
      font-family: var(--font-body);
      transition: all 0.25s ease;
    }
    .region-btn:hover {
      border-color: var(--color-border-accent);
      color: var(--color-text-accent);
      box-shadow: 0 0 12px var(--glow-color-soft);
    }
    .region-btn.is-active {
      background: var(--color-primary-muted);
      color: var(--color-text-accent);
      border-color: var(--color-border-accent);
      border-style: solid;
      font-weight: var(--font-weight-semibold);
      box-shadow: 0 0 16px var(--glow-color-soft);
    }

    /* ==========================================================================
       BREADCRUMB
       ========================================================================== */

    .breadcrumb {
      max-width: var(--content-xl); margin: 0 auto;
      padding: var(--space-2) var(--space-6);
      display: flex; flex-wrap: wrap; gap: var(--space-1);
      font-size: var(--text-body-sm);
      color: var(--color-text-muted);
      font-family: var(--font-mono);
    }
    .breadcrumb a { color: var(--color-text-accent); }
    .breadcrumb .sep { margin: 0 var(--space-1); color: var(--color-text-muted); opacity: 0.4; }

    /* ==========================================================================
       MAIN CONTENT
       ========================================================================== */

    .main {
      max-width: var(--content-xl); margin: 0 auto;
      padding: var(--space-4) var(--space-6) var(--space-16);
    }
    .main h2 {
      font-family: var(--font-heading); font-size: var(--text-h3);
      font-weight: var(--heading-weight-primary);
      margin-bottom: var(--space-6);
      letter-spacing: var(--heading-tracking-h3);
    }

    /* ==========================================================================
       NAV GRID — Glass cards for brands/models/years/engines/categories/groups
       ========================================================================== */

    .nav-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: var(--space-3);
    }
    .nav-card {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      padding: var(--space-4) var(--space-5);
      cursor: pointer;
      transition: all 0.3s var(--ease-out);
      display: flex; align-items: center; justify-content: space-between;
      position: relative;
      overflow: hidden;
    }
    /* Top accent line on hover */
    .nav-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 2px;
      background: var(--gradient-accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s var(--ease-out);
    }
    .nav-card:hover::before { transform: scaleX(1); }
    .nav-card:hover {
      border-color: var(--color-border-accent);
      box-shadow: 0 4px 20px var(--glow-color-soft);
      transform: translateY(-2px);
    }
    .nav-card .name {
      font-weight: var(--font-weight-semibold);
      font-size: var(--text-body);
    }
    .nav-card .count {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
      font-family: var(--font-mono);
    }

    /* ==========================================================================
       PARTS LIST — Glass rows with glow
       ========================================================================== */

    .parts-list { display: flex; flex-direction: column; gap: var(--space-3); }
    .part-row {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--glass-blur));
      -webkit-backdrop-filter: blur(var(--glass-blur));
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      padding: var(--space-4) var(--space-5);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: var(--space-3);
      transition: all 0.3s var(--ease-out);
    }
    .part-row:hover {
      border-color: var(--color-border-accent);
      box-shadow: 0 4px 20px var(--glow-color-soft);
    }

    /* Local-mode priority highlights */
    .part-row--tier1 {
      border-color: var(--color-border-accent);
      box-shadow: 0 0 16px var(--glow-color-soft);
    }
    .part-manu {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 3px 10px; margin-bottom: var(--space-2);
      background: var(--color-primary-muted);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-sm);
      font-size: var(--text-caption);
      font-weight: var(--font-weight-bold);
      text-transform: uppercase;
      letter-spacing: var(--tracking-wider);
      color: var(--color-text-accent);
      font-family: var(--font-mono);
    }
    .part-row--tier2 .part-manu {
      background: var(--color-surface-2);
      color: var(--color-text-secondary);
    }
    .part-manu .manu-tier { color: var(--color-primary); font-size: 13px; }
    .part-oem-sub { color: var(--color-text-muted); font-weight: var(--font-weight-regular); font-size: var(--text-caption); }

    .part-stock {
      display: inline-block;
      margin-top: var(--space-2);
      padding: 2px 10px;
      border-radius: var(--radius-full);
      font-size: var(--text-caption);
      font-weight: var(--font-weight-semibold);
    }
    .part-stock--yes { background: rgba(63,185,80,0.15); color: #3FB950; border: 1px solid rgba(63,185,80,0.3); }
    .part-stock--no  { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px dashed var(--glass-border); }
    .part-name {
      font-weight: var(--font-weight-semibold);
      font-size: var(--text-body);
    }
    .part-oem {
      font-family: var(--font-mono);
      font-size: var(--text-body-sm);
      color: var(--color-text-accent);
    }
    .part-desc {
      font-size: var(--text-body-sm);
      color: var(--color-text-secondary);
      margin-top: var(--space-1);
    }
    .part-alts {
      font-size: var(--text-caption);
      color: var(--color-text-muted);
      margin-top: var(--space-2);
    }
    .part-alts span {
      display: inline-block;
      background: var(--color-primary-muted);
      padding: 2px var(--space-2);
      border-radius: var(--radius-sm);
      margin-right: var(--space-1);
      margin-bottom: var(--space-1);
      font-family: var(--font-mono);
      border: 1px dashed var(--glass-border);
    }
    .part-img {
      width: 80px; height: 80px;
      object-fit: contain;
      border-radius: var(--radius-sm);
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
    }
    .part-detail-btn {
      font-size: var(--text-caption);
      color: var(--color-text-accent);
      cursor: pointer;
      border: none; background: none; font-family: var(--font-body);
      padding: var(--space-1) 0;
      transition: color 0.2s;
    }
    .part-detail-btn:hover { text-decoration: underline; }

    /* ==========================================================================
       PAGINATION — Glass buttons
       ========================================================================== */

    .pagination {
      display: flex; justify-content: center; gap: var(--space-2);
      margin-top: var(--space-6);
    }
    .pagination button {
      padding: var(--space-2) var(--space-4);
      background: var(--glass-bg);
      backdrop-filter: blur(8px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-md);
      color: var(--color-text-primary);
      cursor: pointer; font-family: var(--font-body);
      transition: all 0.25s ease;
    }
    .pagination button:hover {
      border-color: var(--color-border-accent);
      box-shadow: 0 0 12px var(--glow-color-soft);
    }
    .pagination button.active {
      background: var(--gradient-accent);
      color: var(--btn-primary-text);
      border-color: transparent;
      box-shadow: 0 3px 0 var(--color-primary-active),
                  0 4px 12px var(--glow-color-soft);
    }
    .pagination button:disabled { opacity: .4; cursor: default; }

    /* ==========================================================================
       SEARCH RESULTS
       ========================================================================== */

    .search-results { display: flex; flex-direction: column; gap: var(--space-3); }

    /* ==========================================================================
       PART DETAIL MODAL — Glass overlay
       ========================================================================== */

    .modal-overlay {
      display: none;
      position: fixed; inset: 0;
      background: var(--overlay-backdrop);
      z-index: var(--z-modal);
      justify-content: center; align-items: flex-start;
      padding: var(--space-10) var(--space-4);
      overflow-y: auto;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
    }
    .modal-overlay.open { display: flex; }
    .modal-content {
      background: var(--glass-bg-strong);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--glass-border);
      border-radius: var(--radius-lg);
      max-width: 700px; width: 100%;
      padding: var(--space-8);
      position: relative;
      box-shadow: 0 24px 48px rgba(0,0,0,0.3);
    }
    .modal-close {
      position: absolute; top: var(--space-3); right: var(--space-3);
      background: none; border: none; color: var(--color-text-muted);
      font-size: 1.5rem; cursor: pointer; line-height: 1;
      transition: color 0.2s;
    }
    .modal-close:hover { color: var(--color-text-accent); }
    .detail-section { margin-top: var(--space-6); }
    .detail-section h4 {
      font-family: var(--font-heading);
      font-size: var(--text-h6);
      font-weight: var(--heading-weight-secondary);
      margin-bottom: var(--space-3);
      color: var(--color-text-accent);
    }
    .alt-table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--text-body-sm);
    }
    .alt-table th, .alt-table td {
      padding: var(--space-2) var(--space-3);
      text-align: left;
      border-bottom: 1px solid var(--glass-border);
    }
    .alt-table th {
      color: var(--color-text-muted);
      font-weight: var(--font-weight-semibold);
      text-transform: uppercase;
      font-size: var(--text-caption);
      letter-spacing: var(--tracking-widest);
      font-family: var(--font-mono);
    }

    /* ==========================================================================
       LOADING / EMPTY
       ========================================================================== */

    .loading {
      text-align: center; padding: var(--space-10);
      color: var(--color-text-muted);
      font-size: var(--text-body);
    }
    .empty {
      text-align: center; padding: var(--space-10);
      color: var(--color-text-muted);
    }

    /* ==========================================================================
       FOOTER
       ========================================================================== */

    .site-footer {
      padding: var(--space-4) 0; text-align: center;
      border-top: 1px solid var(--color-border);
      font-size: var(--text-caption); color: var(--color-text-muted);
    }

    /* ==========================================================================
       RESPONSIVE
       ========================================================================== */

    @media (max-width: 640px) {
      .nav-grid { grid-template-columns: 1fr; }
      .part-row { grid-template-columns: 1fr; }
    }