/* ===== Reset & Base ===== */
    *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
    :root {
      --yellow: #FFB81C;
      --yellow-dark: #E5A300;
      --dark: #1A1A1A;
      --dark-2: #2B2B2B;
      --steel: #4A4A4A;
      --steel-light: #6E6E6E;
      --orange: #FF6B00;
      --bg: #F0F0F0;
      --white: #FFFFFF;
      --border: #D0D0D0;
      --text: #1A1A1A;
      --text-muted: #6E6E6E;
      --green: #00A651;
      --red: #E5252A;
    }
    body {
      font-family: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
    }
    a { color: inherit; text-decoration: none; }

    /* ===== Header ===== */
    .header {
      background: var(--dark);
      position: relative;
      overflow: hidden;
      border-bottom: 4px solid var(--yellow);
    }
    .header::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0; bottom: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100' viewBox='0 0 56 100'%3E%3Cpath d='M28 66L0 50V16l28-16 28 16v34L28 66zm0-12.7L46 42.6V21.4L28 9.7 10 21.4v21.2L28 53.3z' fill='%23333333' fill-opacity='0.35'/%3E%3C/svg%3E");
      opacity: 0.5;
    }
    .header-inner {
      position: relative;
      z-index: 1;
      max-width: 1400px;
      margin: 0 auto;
      padding: 28px 24px;
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .header-logo {
      flex-shrink: 0;
      position: relative;
      background: #fff;
      border-radius: 8px;
      height: 72px;
      padding: 7px 10px;
      box-sizing: border-box;
      box-shadow: 0 2px 12px rgba(0,0,0,0.35);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .header-logo img {
      height: 100%;
      width: auto;
      max-width: 100%;
      display: block;
    }
    .header-title { color: #fff; }
    .header-title .header-title-main {
      font-size: 22px;
      font-weight: 700;
      letter-spacing: 1px;
    }
    .header-title p {
      font-size: 12px;
      color: var(--yellow);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-top: 2px;
    }
    .header-stats {
      margin-left: auto;
      display: flex;
      gap: 24px;
    }
    .header-stat {
      text-align: center;
    }
    .header-stat .num {
      font-size: 24px;
      font-weight: 800;
      color: var(--yellow);
      font-family: "Inter", system-ui, sans-serif;
    }
    .header-stat .label {
      font-size: 11px;
      color: #999;
      margin-top: 2px;
    }

    /* ===== Navigation ===== */
    .nav {
      background: var(--dark-2);
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .nav-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      gap: 0;
    }
    .nav-link {
      padding: 14px 20px;
      font-size: 14px;
      font-weight: 500;
      color: rgba(255,255,255,0.7);
      transition: all 0.2s;
      border-bottom: 3px solid transparent;
    }
    .nav-link:hover {
      color: #fff;
      background: rgba(255,255,255,0.05);
    }
    .nav-link.active {
      color: var(--yellow);
      border-bottom-color: var(--yellow);
    }

    /* ===== Search Section ===== */
    .search-section {
      background: var(--white);
      border-bottom: 1px solid var(--border);
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    }
    .search-inner {
      max-width: 1400px;
      margin: 0 auto;
      padding: 20px 24px;
    }
    .search-bar {
      display: flex;
      gap: 12px;
      margin-bottom: 16px;
    }
    .search-input {
      flex: 1;
      display: flex;
      align-items: center;
      background: var(--bg);
      border: 2px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
      transition: border-color 0.2s;
    }
    .search-input:focus-within { border-color: var(--yellow); }
    .search-input svg {
      width: 20px; height: 20px;
      margin: 0 12px;
      flex-shrink: 0;
      color: var(--steel-light);
    }
    .search-input input {
      flex: 1;
      border: none;
      background: transparent;
      padding: 12px 12px 12px 0;
      font-size: 15px;
      outline: none;
      color: var(--text);
    }
    .search-input input::placeholder { color: var(--steel-light); }

    .btn {
      padding: 12px 28px;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
      letter-spacing: 0.5px;
    }
    .btn-primary {
      background: var(--yellow);
      color: var(--dark);
    }
    .btn-primary:hover { background: var(--yellow-dark); }
    .btn-outline {
      background: transparent;
      border: 2px solid var(--border);
      color: var(--steel);
    }
    .btn-outline:hover { border-color: var(--steel); color: var(--text); }

    .advanced-toggle {
      font-size: 13px;
      color: var(--steel-light);
      cursor: pointer;
      user-select: none;
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 0;
    }
    .advanced-toggle:hover { color: var(--text); }
    .advanced-toggle .arrow { transition: transform 0.2s; }
    .advanced-toggle.open .arrow { transform: rotate(180deg); }

    .advanced-filters {
      display: none;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      padding: 16px;
      background: var(--bg);
      border-radius: 6px;
      margin-top: 12px;
    }
    .advanced-filters.show { display: grid; }
    .filter-group label {
      display: block;
      font-size: 12px;
      color: var(--text-muted);
      margin-bottom: 4px;
      font-weight: 500;
    }
    .filter-group select,
    .filter-group input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 13px;
      background: var(--white);
      color: var(--text);
      outline: none;
      transition: border-color 0.2s;
    }
    .filter-group select:focus,
    .filter-group input:focus { border-color: var(--yellow); }

    /* ===== Category Quick Filters ===== */
    .category-bar {
      max-width: 1400px;
      margin: 0 auto;
      padding: 12px 24px;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      white-space: nowrap;
    }
    .cat-chip {
      padding: 6px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
      background: var(--white);
      border: 1px solid var(--border);
      color: var(--steel);
    }
    .cat-chip:hover { border-color: var(--yellow); color: var(--text); }
    .cat-chip.active {
      background: var(--dark);
      color: var(--yellow);
      border-color: var(--dark);
    }

    /* ===== Results Section ===== */
    .results-section {
      max-width: 1400px;
      margin: 0 auto;
      padding: 16px 24px 48px;
    }
    .results-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .results-count {
      font-size: 14px;
      color: var(--text-muted);
    }
    .results-count strong { color: var(--text); font-weight: 700; }

    /* ===== Table ===== */
    .table-wrap {
      background: var(--white);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }
    .table-scroll { overflow-x: auto; }
    /* Catalogue table only (#resultsTable). Everything here is scoped on purpose: unscoped
       table/th/td rules leak onto the cart modal's Parts List, whose column order is different —
       the phone rules below once hid the cart's Part No. / Machine Model / price columns. */
    #resultsTable {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      table-layout: fixed;
    }
    #resultsTable thead {
      background: var(--dark);
    }
    #resultsTable th {
      padding: 10px 6px;
      text-align: left;
      font-weight: 600;
      color: #ddd;
      white-space: nowrap;
      font-size: 12px;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      border-bottom: 2px solid var(--yellow);
    }
    #resultsTable td {
      padding: 8px 6px;
      border-bottom: 1px solid #EEE;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #resultsTable tbody tr { transition: background 0.1s; }
    #resultsTable tbody tr:hover { background: #FFF8E7; }
    #resultsTable tbody tr:last-child td { border-bottom: none; }

    /* Column widths - balanced layout */
    #resultsTable th:nth-child(1), #resultsTable td:nth-child(1) { width: 4%; }    /* No. */
    #resultsTable th:nth-child(2), #resultsTable td:nth-child(2) { width: 7%; }    /* Brand */
    #resultsTable th:nth-child(3), #resultsTable td:nth-child(3) { width: 8%; }    /* Machine Model */
    #resultsTable th:nth-child(4), #resultsTable td:nth-child(4) { width: 8%; }    /* Part No. */
    #resultsTable th:nth-child(5), #resultsTable td:nth-child(5) { width: 13%; }   /* Part Name */
    #resultsTable th:nth-child(6), #resultsTable td:nth-child(6) { width: 8%; }    /* Pump No. */
    #resultsTable th:nth-child(7), #resultsTable td:nth-child(7) { width: 8%; }    /* Engine No. */
    #resultsTable th:nth-child(8), #resultsTable td:nth-child(8) { width: 8%; }    /* Price (USD) */
    #resultsTable th:nth-child(9), #resultsTable td:nth-child(9) { width: 8%; }    /* Price (CNY) */
    #resultsTable th:nth-child(10), #resultsTable td:nth-child(10) { width: 7%; }  /* Weight */
    #resultsTable th:nth-child(11), #resultsTable td:nth-child(11) { width: 7%; }  /* Warranty */
    #resultsTable th:nth-child(12), #resultsTable td:nth-child(12) { width: 10%; } /* Action */

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 3px;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }
    .badge-cat {
      background: #F0F0F0;
      color: var(--steel);
    }
    .badge-stock-ok { background: #E8F5E9; color: var(--green); }
    .badge-stock-low { background: #FFF3E0; color: var(--orange); }
    .badge-stock-out { background: #FFEBEE; color: var(--red); }

    .price { font-weight: 700; color: var(--red); font-family: "Inter", system-ui, sans-serif; }
    .part-num { font-family: "JetBrains Mono", "Consolas", monospace; font-size: 12px; color: var(--steel); }

    .btn-detail {
      padding: 4px 12px;
      border-radius: 3px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid var(--yellow);
      background: var(--yellow);
      color: var(--dark);
      transition: all 0.15s;
    }
    .btn-detail:hover { background: var(--yellow-dark); }

    /* modal footer: link to the part's own indexable page (/parts/<id>) */
    .detail-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
                      margin-top: 16px; padding-top: 14px; border-top: 1px solid #EEE; }
    .detail-actions .btn-detail { display: inline-block; text-decoration: none; padding: 8px 16px; font-size: 13px; }
    .detail-hint { font-size: 12.5px; color: var(--steel); }

    /* ===== Sticky Action Column ===== */
    th.action-col, td.action-cell {
      position: sticky;
      right: 0;
      z-index: 2;
      background: var(--white);
      box-shadow: -4px 0 8px rgba(0,0,0,0.1);
      border-left: 2px solid var(--yellow);
    }
    th.action-col {
      background: var(--dark);
      z-index: 3;
      box-shadow: -4px 0 8px rgba(0,0,0,0.3);
    }
    td.action-cell { padding: 8px 8px; }
    tbody tr:hover td.action-cell { background: #FFF8E7; }

    /* ===== Add to Cart Button (Prominent) ===== */
    .btn-cart {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 14px;
      border-radius: 4px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      border: none;
      background: var(--yellow);
      color: var(--dark);
      transition: all 0.15s;
      white-space: nowrap;
      box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    }
    .btn-cart:hover {
      background: var(--yellow-dark);
      transform: translateY(-1px);
      box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    }
    .btn-cart:active { transform: translateY(0); }
    .btn-cart svg { width: 16px; height: 16px; }
    .btn-cart.added { background: var(--green); color: #fff; }
    .btn-text-short { display: none; }

    /* ===== "Already in the quotation" marker ===== */
    /* the button keeps the state after the click flash, so a customer can see at a glance which
       rows of the result table are already in the quotation, and how many of each */
    .btn-cart.in-cart { background: var(--green); color: #fff; box-shadow: 0 1px 3px rgba(46,125,50,0.28); }
    .btn-cart.in-cart:hover { background: #24672A; color: #fff; }
    .btn-cart .qty-chip { display: none; }
    .btn-cart.in-cart .qty-chip {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
      background: rgba(255,255,255,0.3); color: #fff;
      font-size: 10.5px; font-weight: 800; line-height: 1;
    }
    /* whole row tinted as well: colour + check icon, never colour alone */
    tbody tr.row-in-cart, tbody tr.row-in-cart:hover { background: #EAF7EC; }
    /* 3px accent drawn inside the first cell: reads as a marker without moving any column */
    tbody tr.row-in-cart td:first-child { box-shadow: inset 3px 0 0 var(--green); }
    tbody tr.row-in-cart td.action-cell, tbody tr.row-in-cart:hover td.action-cell { background: #F1F9F2; }

    /* ===== Add-to-quotation confirmation ===== */
    .cart-toast-stack {
      position: fixed; left: 32px; bottom: 32px; z-index: 1200;
      display: flex; flex-direction: column-reverse; gap: 10px; pointer-events: none;
    }
    .cart-toast {
      pointer-events: auto; display: flex; align-items: center; gap: 10px;
      width: 370px; max-width: calc(100vw - 64px);
      background: var(--dark); color: #fff; border-left: 4px solid var(--green);
      border-radius: 6px; padding: 11px 13px; box-shadow: 0 8px 24px rgba(0,0,0,0.28);
      animation: toastIn 0.22s ease-out;
    }
    .cart-toast.leaving { animation: toastOut 0.2s ease-in forwards; }
    .cart-toast .tick {
      flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--green);
      display: flex; align-items: center; justify-content: center; color: #fff;
    }
    .cart-toast .tick svg { width: 13px; height: 13px; }
    .cart-toast .t-body { flex: 1 1 auto; min-width: 0; }
    .cart-toast .t-title {
      font-size: 13px; font-weight: 700; line-height: 1.25;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .cart-toast .t-sub { font-size: 12.5px; color: #D6DAE0; margin-top: 2px; }
    .cart-toast .t-sub b { color: var(--yellow); font-weight: 800; }
    .cart-toast .t-view {
      flex: 0 0 auto; background: var(--yellow); color: var(--dark); border: none; border-radius: 4px;
      font-size: 12px; font-weight: 700; padding: 6px 10px; cursor: pointer; white-space: nowrap;
    }
    .cart-toast .t-view:hover { background: var(--yellow-dark); }
    .cart-toast .t-close {
      flex: 0 0 auto; background: none; border: none; color: #A8ADB6; font-size: 15px;
      line-height: 1; cursor: pointer; padding: 6px 2px 6px 8px;   /* >= 24px hit area */
    }
    .cart-toast .t-close:hover { color: #fff; }
    @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    @keyframes toastOut { to { opacity: 0; transform: translateY(8px); } }

    /* ===== Pagination ===== */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 4px;
      margin-top: 20px;
    }
    .page-btn {
      min-width: 36px; height: 36px;
      border: 1px solid var(--border);
      background: var(--white);
      border-radius: 4px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: var(--steel);
      transition: all 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .page-btn:hover { border-color: var(--yellow); color: var(--text); }
    .page-btn.active {
      background: var(--dark);
      color: var(--yellow);
      border-color: var(--dark);
    }
    .page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

    /* ===== Modal ===== */
    .modal-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.6);
      z-index: 1000;
      justify-content: center;
      align-items: center;
      padding: 20px;
    }
    .modal-overlay.show { display: flex; }
    .modal {
      background: var(--white);
      border-radius: 8px;
      max-width: 640px;
      width: 100%;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      animation: modalIn 0.2s ease;
    }
    @keyframes modalIn {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .modal-header {
      background: var(--dark);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 3px solid var(--yellow);
      border-radius: 8px 8px 0 0;
    }
    .modal-header h2 {
      color: #fff;
      font-size: 16px;
      font-weight: 700;
    }
    .modal-close {
      width: 32px; height: 32px;
      border: none;
      background: none;
      cursor: pointer;
      color: #999;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 4px;
    }
    .modal-close:hover { color: #fff; background: rgba(255,255,255,0.1); }
    .modal-body { padding: 20px; }
    .detail-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1px;
      background: var(--border);
      border: 1px solid var(--border);
      border-radius: 4px;
      overflow: hidden;
    }
    .detail-item {
      background: var(--white);
      padding: 10px 14px;
    }
    .detail-item .label {
      font-size: 11px;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 2px;
    }
    .detail-item .value {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
    }
    .detail-item .value.price-val { color: var(--red); }
    .detail-desc {
      margin-top: 16px;
      padding: 12px 14px;
      background: var(--bg);
      border-radius: 4px;
      font-size: 13px;
      color: var(--steel);
      line-height: 1.8;
    }

    /* ===== Loading & Empty ===== */
    .loading, .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: var(--text-muted);
    }
    .loading .spinner {
      width: 36px; height: 36px;
      border: 3px solid var(--border);
      border-top-color: var(--yellow);
      border-radius: 50%;
      margin: 0 auto 12px;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .empty-state svg { width: 48px; height: 48px; color: var(--border); margin-bottom: 8px; }

    /* ===== Responsive ===== */
    @media (max-width: 768px) {
      .header-inner { flex-direction: column; text-align: center; }
      .header-stats { margin-left: 0; }
      .search-bar { flex-direction: column; }
      .advanced-filters { grid-template-columns: 1fr 1fr; }
      .detail-grid { grid-template-columns: 1fr; }

      /* Hide non-essential columns on mobile (catalogue table only - see #resultsTable scoping) */
      #resultsTable th:nth-child(2), #resultsTable td:nth-child(2) { display: none; }   /* Brand */
      #resultsTable th:nth-child(6), #resultsTable td:nth-child(6) { display: none; }   /* Pump No. */
      #resultsTable th:nth-child(7), #resultsTable td:nth-child(7) { display: none; }   /* Engine No. */
      #resultsTable th:nth-child(9), #resultsTable td:nth-child(9) { display: none; }   /* Price (CNY) */
      #resultsTable th:nth-child(10), #resultsTable td:nth-child(10) { display: none; } /* Weight */
      #resultsTable th:nth-child(11), #resultsTable td:nth-child(11) { display: none; } /* Warranty */

      /* Shorten the one header that is too long for a phone */
      #resultsTable th[data-mobile] { font-size: 0; }
      #resultsTable th[data-mobile]::after { content: attr(data-mobile); font-size: 9px; letter-spacing: 0.3px; }

      /* All six columns stay on screen at once - nothing is hidden, nothing needs a sideways
         swipe. Every cell may wrap, so a long value can never spill over its neighbour.
         (Before: %-widths with nowrap headers -> "NO.MACHINPART NO." on a 390 px phone.) */
      #resultsTable th, #resultsTable td { white-space: normal; word-break: break-word; overflow-wrap: anywhere; }
      #resultsTable th:nth-child(1),  #resultsTable td:nth-child(1)  { width: 7%; }  /* No. */
      #resultsTable th:nth-child(3),  #resultsTable td:nth-child(3)  { width: 16%; } /* Machine Model */
      #resultsTable th:nth-child(4),  #resultsTable td:nth-child(4)  { width: 18%; } /* Part No. */
      #resultsTable th:nth-child(5),  #resultsTable td:nth-child(5)  { width: 23%; } /* Part Name */
      #resultsTable th:nth-child(8),  #resultsTable td:nth-child(8)  { width: 18%; } /* Price (USD) */
      #resultsTable th:nth-child(12), #resultsTable td:nth-child(12) { width: 18%; } /* Action */
      #resultsTable { min-width: 0; }

      /* keep the Add button compact so its column stays narrow */
      .btn-text-full { display: none; }
      .btn-text-short { display: inline; }
      .btn-cart { font-size: 10px; padding: 3px 5px; gap: 3px; }
      .btn-cart svg { width: 11px; height: 11px; }
      /* in-cart marker on a phone: check + count only, it has to fit the narrow Action column */
      .btn-cart.in-cart .qty-chip { min-width: 14px; height: 14px; font-size: 9.5px; padding: 0 3px; }
      /* confirmation sits above the floating cart button without moving it or leaving a gutter */
      .cart-toast-stack { left: 12px; right: 12px; bottom: 104px; }
      .cart-toast { width: auto; max-width: none; padding: 10px 11px; gap: 8px; }
      .cart-toast .t-title { font-size: 12.5px; }
      .cart-toast .t-sub { font-size: 11px; }
      .cart-toast .t-view { padding: 6px 9px; font-size: 11.5px; }

      #resultsTable th, #resultsTable td { font-size: 11px; padding: 6px 3px; }
      #resultsTable th { font-size: 9px; letter-spacing: 0.3px; }
      td.action-cell, th.action-col { padding: 6px 3px; }   /* must match td.action-cell from the base CSS */
      .part-num { font-size: 9px; }
      .price { font-size: 10px; }
    }
    @media (max-width: 480px) {
      .advanced-filters { grid-template-columns: 1fr; }
      .header-stat .num { font-size: 18px; }

      /* same six columns, one notch tighter - still all visible, still no sideways scroll */
      #resultsTable th, #resultsTable td { font-size: 10px; padding: 5px 2px; }
      #resultsTable th { font-size: 9px; letter-spacing: 0; }
      .btn-cart { font-size: 9px; padding: 2px 4px; gap: 3px; }
      .btn-cart svg { width: 10px; height: 10px; }
      .part-num { font-size: 9px; }
      .price { font-size: 10px; }
    }

    /* ===== Cart Floating Button ===== */
    .cart-fab {
      position: fixed;
      bottom: 32px; right: 32px;
      width: 60px; height: 60px;
      border-radius: 50%;
      background: var(--yellow);
      border: 3px solid var(--dark);
      cursor: pointer;
      z-index: 900;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 16px rgba(0,0,0,0.25);
      transition: transform 0.15s;
    }
    .cart-fab:hover { transform: scale(1.08); }
    .cart-fab svg { width: 28px; height: 28px; color: var(--dark); }
    .cart-badge {
      position: absolute;
      top: -6px; right: -6px;
      min-width: 22px; height: 22px;
      background: var(--red);
      color: #fff;
      border-radius: 11px;
      font-size: 11px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--dark);
      padding: 0 4px;
      font-family: "Inter", system-ui, sans-serif;
    }

    /* ===== Cart Modal ===== */
    .cart-modal {
      max-width: 900px;
      width: 100%;
    }
    .cart-section-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--dark);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 10px;
      padding-bottom: 6px;
      border-bottom: 2px solid var(--yellow);
    }
    .cart-items-wrap {
      max-height: 320px;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .cart-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .cart-table thead {
      background: var(--dark);
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .cart-table th {
      padding: 8px 10px;
      text-align: left;
      font-size: 11px;
      color: #ddd;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      white-space: nowrap;
    }
    .cart-table td {
      padding: 8px 10px;
      border-bottom: 1px solid #EEE;
      white-space: nowrap;
    }
    .cart-table tbody tr:hover { background: #FFF8E7; }
    .cart-qty {
      width: 50px;
      padding: 4px 6px;
      border: 1px solid var(--border);
      border-radius: 3px;
      font-size: 13px;
      text-align: center;
      outline: none;
    }
    .cart-qty:focus { border-color: var(--yellow); }
    .cart-remove {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--red);
      font-size: 18px;
      padding: 2px 6px;
      border-radius: 3px;
    }
    .cart-remove:hover { background: #FFEBEE; }
    .cart-empty {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-muted);
      font-size: 14px;
    }
    .cart-total-row {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: var(--bg);
      border-radius: 4px;
      margin-bottom: 16px;
    }
    .cart-total-row .label { font-size: 14px; color: var(--text-muted); }
    .cart-total-row .amount {
      font-size: 22px;
      font-weight: 800;
      color: var(--red);
      font-family: "Inter", system-ui, sans-serif;
    }

    /* ===== Buyer Form ===== */
    .buyer-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 16px;
    }
    .buyer-form .full { grid-column: 1 / -1; }
    .buyer-form label {
      display: block;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 3px;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .buyer-form input {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 4px;
      font-size: 13px;
      outline: none;
      transition: border-color 0.2s;
    }
    .buyer-form input:focus { border-color: var(--yellow); }
    /* Buyer information is required: mark it, and show exactly what is missing */
    .cart-section-title .req-note { font-size: 10.5px; font-weight: 600; color: var(--text-muted);
                                    letter-spacing: 0.4px; text-transform: none; margin-left: 6px; }
    .buyer-form .req { color: var(--red); font-weight: 700; }
    .buyer-form input.invalid { border-color: var(--red); background: #FFF6F6; }
    .buyer-form input.invalid:focus { border-color: var(--red); }
    .buyer-error { background: #FFF6F6; border: 1px solid #F0CBCB; border-left: 3px solid var(--red);
                   color: #B3261E; font-size: 12.5px; line-height: 1.5; padding: 8px 10px;
                   border-radius: 4px; margin: 0 0 14px; }
    .buyer-error[hidden] { display: none; }
    .cart-actions {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }
    .btn-export {
      background: var(--dark);
      color: var(--yellow);
      border: 2px solid var(--dark);
      padding: 10px 24px;
    }
    .btn-export:hover { background: var(--dark-2); }
    .btn-export:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    /* ===== Seller Info in Cart ===== */
    .seller-info {
      padding: 12px 14px;
      background: var(--bg);
      border-radius: 4px;
      margin-bottom: 16px;
      font-size: 12px;
      color: var(--steel);
      line-height: 1.8;
    }
    .seller-info strong { color: var(--dark); }
  
    /* ===== FIX (B2): chips + cart button behaviour ===== */
    /* 1) chips wrap on desktop so no chip is ever cut off mid-word ... */
    .category-bar { flex-wrap: wrap; white-space: normal; overflow-x: visible; row-gap: 8px; }
    /* ... but on small screens a single scrollable strip beats 12 stacked rows */
    @media (max-width: 767px) {
      .category-bar { flex-wrap: nowrap; white-space: nowrap; overflow-x: auto;
                      -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 10px; }
      .category-bar::-webkit-scrollbar { height: 4px; }
      .category-bar::-webkit-scrollbar-thumb { background: #C9C9C9; border-radius: 2px; }
    }
    /* 2) floating cart button: unchanged from the original design (60px, 32px inset).
          It may cover the last column edge on narrow windows - the boss prefers the
          full-width table over a reserved gutter, so no padding is reserved here. */
    /* 3) cart list gained a "Pump No." column: give the modal room and let long
          text truncate with an ellipsis instead of pushing the table wider */
    .cart-modal { max-width: 1000px; }
    .cart-table td.cell-ellip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
    .cart-table td.cell-ellip .part-num { display: inline-block; max-width: 100%; overflow: hidden;
                                          text-overflow: ellipsis; vertical-align: bottom; }
    /* 4) cart modal on phones: the Parts List keeps EVERY column - No. / Part No. / Pump No. /
          Part Name / Brand / Machine Model / Unit Price / Qty / Subtotal / remove - and scrolls
          sideways. The catalogue's phone rules hide its spare columns and shrink its fonts; they
          are scoped to #resultsTable so they cannot reach this table (they used to: the cart showed
          only No. / Pump No. / Part Name / Brand / Qty on a phone). */
    @media (max-width: 900px) {
      .cart-table { min-width: 640px; table-layout: auto; }
      .cart-table th, .cart-table td { display: table-cell; white-space: nowrap;
                                       font-size: 12px; padding: 7px 8px; }
      .cart-table th { font-size: 10px; }
      .cart-table td.cell-ellip { max-width: 140px; }
      .cart-table .part-num { font-size: 11px; }
      .cart-table .price { font-size: 12px; }
      .cart-items-wrap { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    }