.mp-head { position: relative; overflow: hidden; color: #fff; border-radius: 22px; padding: 30px 34px; margin-bottom: 18px;
    background: radial-gradient(ellipse 620px 300px at 92% 0%, rgba(16,185,129,.40) 0, transparent 60%),
                linear-gradient(135deg, #064e3b 0%, #0b4a6e 55%, #1d4ed8 100%);
    box-shadow: 0 24px 60px -20px rgba(11,30,52,.40); }
  .mp-pill { display: inline-flex; gap: 8px; align-items: center; margin-bottom: 12px; padding: 6px 13px; border-radius: 999px;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: 12.5px; font-weight: 700; color: #d1fae5; }
  .mp-head h1 { margin: 0 0 8px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
  .mp-head p { margin: 0; max-width: 840px; color: rgba(255,255,255,.86); font-size: 15px; line-height: 1.6; }
  .mp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
  .mp-stat { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.16); padding: 8px 14px; border-radius: 12px;
    font-size: 12.5px; color: rgba(255,255,255,.78); }
  .mp-stat b { display: block; color: #fff; font-size: 18px; font-weight: 800; }

  /* search */
  .mp-search { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
  .mp-search input, .mp-search select { padding: 15px 16px; border-radius: 13px; border: 0; font: inherit; font-size: 16px; }
  .mp-q { position: relative; flex: 1 1 320px; min-width: 0; }
  .mp-q input { width: 100%; box-sizing: border-box; padding-right: 48px; }
  .mp-q input { min-height: 54px; transition: box-shadow .15s; }
  .mp-q input:focus { outline: none; box-shadow: 0 0 0 4px rgba(251,191,36,.45); }
  /* the make / ECU menus: a small caption over the value, own arrow, green once a filter is set */
  .mp-sel { position: relative; display: block; flex: 0 1 230px; min-width: 0; }
  .mp-sel-k { position: absolute; left: 16px; top: 8px; z-index: 1; pointer-events: none; font-size: 10.5px; font-weight: 800;
    letter-spacing: .09em; text-transform: uppercase; color: #059669; }
  .mp-search .mp-sel select { width: 100%; height: 54px; padding: 22px 40px 7px 16px; border-radius: 13px; cursor: pointer;
    -webkit-appearance: none; appearance: none; font-size: 16px; font-weight: 700; color: #111827; text-overflow: ellipsis;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px;
    transition: box-shadow .15s, background-color .15s; }
  .mp-search .mp-sel select:hover { box-shadow: inset 0 0 0 2px #6ee7b7; }
  .mp-search .mp-sel select:focus { outline: none; box-shadow: inset 0 0 0 2px #10b981, 0 0 0 4px rgba(110,231,183,.35); }
  .mp-search .mp-sel.on select { background-color: #ecfdf5; box-shadow: inset 0 0 0 2px #10b981; }
  .mp-search button.mp-go { transition: transform .12s, box-shadow .15s; }
  .mp-search button.mp-go:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(251,191,36,.7); }
  .mp-search button.mp-go { padding: 0 26px; border: 0; border-radius: 13px; background: #fbbf24; color: #111827; font-weight: 800;
    font-size: 16px; cursor: pointer; min-height: 52px; }
  /* × in the search box: one click empties it */
  .mp-clear { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 34px; height: 34px; padding: 0;
    border: 0; border-radius: 50%; background: #e5e7eb; color: #374151; cursor: pointer; display: grid; place-items: center; }
  .mp-clear:hover { background: #d1d5db; }
  .mp-clear svg { width: 16px; height: 16px; }
  .mp-clear[hidden] { display: none; }
  /* pages of results */
  .mp-pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; }
  .mp-pager a, .mp-pager span { min-width: 40px; padding: 9px 12px; border-radius: 10px; text-align: center; font-weight: 700;
    font-size: 14px; text-decoration: none; border: 1px solid var(--line); color: var(--text); background: #fff; box-sizing: border-box; }
  .mp-pager a:hover { border-color: #6ee7b7; background: #f0fdf9; }
  .mp-pager .cur { background: #047857; border-color: #047857; color: #fff; }
  .mp-pager .gap { border: 0; background: none; min-width: 0; padding: 9px 2px; color: var(--muted); }
  .mp-range { color: var(--muted); font-size: 13.5px; font-weight: 600; margin: -4px 0 12px; }
  .mp-promise { margin-top: 14px; padding: 12px 16px; border-radius: 12px; background: #ecfdf5; border: 1px solid #a7f3d0; }
  .mp-promise p { margin: 0; color: #065f46; font-size: 14px; line-height: 1.55; }
  .mp-wa { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin: 0 0 18px;
    padding: 16px 22px; border-radius: 16px; background: #f0fdf4; border: 1.5px solid #86efac; }
  .mp-wa b { display: block; color: var(--text); font-size: 16px; margin-bottom: 3px; }
  .mp-wa span { color: var(--muted); font-size: 14px; }
  .mp-wa-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; background: #16a34a;
    color: #fff !important; font-weight: 800; text-decoration: none; white-space: nowrap; }
  .mp-hint { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.75); }
  /* with results on the page the header shrinks to the search box: the results sit on the first screen */
  .mp-head.compact { padding: 18px 24px; }
  .mp-head.compact .mp-pill, .mp-head.compact .mp-intro, .mp-head.compact .mp-hint { display: none; }
  .mp-head.compact h1 { font-size: 20px; margin: 0; }
  .mp-head.compact .mp-search { margin-top: 12px; }
  .mp-hint a { color: #fff; font-weight: 700; }

  .mp-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px 26px; margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(11,30,52,.04); }
  .mp-card h2 { margin: 0 0 12px; font-size: 20px; font-weight: 800; color: var(--text); }
  .mp-card h2 small { color: var(--muted); font-weight: 600; font-size: 14px; margin-left: 6px; }
  .mp-card p { color: var(--muted); line-height: 1.65; font-size: 14.5px; margin: 0 0 10px; }
  .mp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
  .mp-step { padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e5e7eb; font-size: 14px; color: var(--muted); }
  .mp-step b { display: block; color: var(--text); font-size: 15px; margin-bottom: 3px; }
  .mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
  .mp-grid a { display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; border-radius: 11px;
    border: 1px solid var(--line); color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; }
  .mp-grid a:hover { border-color: #6ee7b7; background: #f0fdf9; }
  .mp-grid a span { color: #047857; font-weight: 700; font-size: 12.5px; white-space: nowrap; }

  .mp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .mp-table th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
    padding: 10px; border-bottom: 2px solid var(--line); }
  .mp-table td { padding: 11px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .mp-table tr:hover td { background: #f8fffc; }
  .mp-table .code { font-family: 'JetBrains Mono', Consolas, monospace; font-weight: 600; word-break: break-all; font-size: 13px; }
  .mp-table .car a { color: var(--text); font-weight: 700; text-decoration: none; }
  .mp-table small { display: block; color: var(--muted); font-weight: 500; font-size: 12.5px; }
  .mp-buybtn { display: inline-block; white-space: nowrap; padding: 9px 14px; border-radius: 10px; text-decoration: none;
    background: linear-gradient(180deg, #10b981, #047857); color: #fff !important; font-weight: 800; font-size: 13.5px; }

  /* one pack */
  .mp-buy { display: grid; grid-template-columns: 1.3fr 1fr; gap: 22px; align-items: center; border: 2px solid #10b981;
    background: linear-gradient(135deg, #f0fdf9, #fff); border-radius: 20px; padding: 22px 26px; margin-bottom: 18px;
    box-shadow: 0 12px 30px rgba(16,185,129,.14); }
  .mp-buy .price { font-size: 34px; font-weight: 800; color: var(--text); line-height: 1; }
  .mp-buy .price small { font-size: 13.5px; color: var(--muted); font-weight: 600; margin-left: 8px; }
  .mp-buy ul { margin: 12px 0 0; padding: 0; list-style: none; }
  .mp-buy li { padding: 4px 0 4px 24px; position: relative; color: var(--text); font-size: 14.5px; }
  .mp-buy li::before { content: "✓"; position: absolute; left: 0; color: #059669; font-weight: 800; }
  .mp-actions { display: flex; flex-direction: column; gap: 10px; }
  .mp-btn { display: flex; align-items: center; justify-content: center; padding: 17px 22px; border-radius: 14px; border: 0;
    cursor: pointer; font-family: inherit; line-height: 1.2;
    background: linear-gradient(180deg, #10b981, #047857); color: #fff !important; font-weight: 800; font-size: 17px;
    text-decoration: none; box-shadow: 0 10px 24px rgba(4,120,87,.30); text-align: center; }
  .mp-btn.alt { background: #fff; color: #0369a1 !important; border: 1.5px solid #bfdbfe; box-shadow: none; font-size: 14.5px;
    padding: 12px 16px; font-weight: 700; }
  .mp-pay { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; font-size: 11.5px; color: var(--muted); }
  .mp-pay span { border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; background: #fff; }
  .mp-zip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
  .mp-zip div { padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e5e7eb; }
  .mp-zip b { display: block; font-family: 'JetBrains Mono', Consolas, monospace; color: var(--text); margin-bottom: 4px; }
  .mp-zip span { color: var(--muted); font-size: 13.5px; }
  .mp-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .mp-group { padding: 14px 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e5e7eb; }
  .mp-group h3 { display: flex; justify-content: space-between; margin: 0 0 8px; font-size: 14.5px; color: var(--text); }
  .mp-group h3 span { color: #047857; }
  .mp-group ul { margin: 0; padding: 0; list-style: none; }
  .mp-group li { padding: 4px 0; border-top: 1px dashed #e5e7eb; font: 500 13.5px/1.35 ui-monospace, Consolas, monospace; color: #111827; }
  .mp-group li:first-child { border-top: 0; }
  .mp-group li small { color: #047857; font-weight: 700; white-space: nowrap; }
  .mp-common { display: flex; flex-wrap: wrap; gap: 8px; }
  .mp-common span { padding: 6px 11px; border-radius: 999px; background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    font-size: 13px; font-weight: 600; }
  .mp-common small { color: #047857; font-weight: 800; margin-left: 4px; }
  /* the pack page's first screen */
  .mp-top { display: grid; grid-template-columns: 1fr 300px; gap: 8px 30px; background: #fff; border: 2px solid #10b981;
    border-radius: 22px; padding: 26px 30px; margin-bottom: 18px; box-shadow: 0 16px 40px -16px rgba(16,185,129,.35); }
  .mp-tag { display: inline-block; padding: 5px 12px; border-radius: 999px; background: #ecfdf5; color: #047857;
    font-size: 12.5px; font-weight: 800; margin-bottom: 10px; }
  .mp-top h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--text);
    word-break: break-word; }
  .mp-car { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; } .mp-car b { color: var(--text); }
  .mp-codes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
  .mp-codes span { padding: 7px 12px; border-radius: 10px; background: #f1f5f9; border: 1px solid #e2e8f0;
    font: 700 14px/1.2 'JetBrains Mono', Consolas, monospace; color: var(--text); word-break: break-all; }
  .mp-codes small { display: block; font: 700 10.5px/1.2 system-ui, sans-serif; letter-spacing: .06em; color: var(--muted); }
  .mp-ticks { margin: 0; padding: 0; list-style: none; }
  .mp-ticks li { padding: 3px 0 3px 24px; position: relative; color: var(--text); font-size: 14.5px; }
  .mp-ticks li::before { content: "✓"; position: absolute; left: 0; color: #059669; font-weight: 800; }
  .mp-top-buy { display: flex; flex-direction: column; gap: 10px; justify-content: center; padding: 18px; border-radius: 16px;
    background: linear-gradient(135deg, #f0fdf9, #f8fafc); border: 1px solid #a7f3d0; align-self: start; }
  .mp-top-buy .price { font-size: 38px; font-weight: 800; color: var(--text); line-height: 1; text-align: center; }
  .mp-top-buy .price small { display: block; font-size: 13px; color: var(--muted); font-weight: 600; margin-top: 4px; }
  .mp-maps { grid-column: 1 / -1; border-top: 1px solid var(--line); margin-top: 14px; padding-top: 16px; }
  .mp-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
  .mp-chips span { padding: 5px 11px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; font-size: 13px;
    color: var(--text); font-weight: 600; }
  .mp-chips b { color: #047857; margin-left: 3px; }
  .mp-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid #10b981; background: #ecfdf5; color: #065f46; font: inherit; font-weight: 800; font-size: 15px; }
  .mp-toggle:hover { background: #d1fae5; }
  .mp-toggle svg { transition: transform .2s; }
  .mp-toggle .t-close, .mp-toggle[aria-expanded="true"] .t-open { display: none; }
  .mp-toggle[aria-expanded="true"] .t-close { display: inline; }
  .mp-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .mp-list { margin-top: 14px; animation: mpIn .2s ease-out; }
  @keyframes mpIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .mp-list-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 14px;
    color: var(--muted); font-size: 13px; }
  .mp-list-foot .mp-btn { padding: 13px 20px; font-size: 15px; }
  @media (max-width: 760px) {
    .mp-top { grid-template-columns: 1fr; padding: 18px 16px; } .mp-top h1 { font-size: 22px; }
    .mp-toggle { width: 100%; justify-content: center; } .mp-list-foot .mp-btn { width: 100%; }
  }
  .mp-faq h3 { margin: 14px 0 4px; font-size: 15.5px; color: var(--text); } .mp-faq h3:first-of-type { margin-top: 0; }
  .mp-note { padding: 10px 14px; border-radius: 12px; background: #fffbeb; border: 1px dashed #f59e0b; color: #92400e; font-size: 13px; }
  .mp-sticky { display: none; }
  @media (max-width: 760px) {
    .mp-head { padding: 20px 16px; } .mp-head h1 { font-size: 23px; }
    .mp-card { padding: 16px 14px; } .mp-buy { grid-template-columns: 1fr; padding: 18px 16px; }
    .mp-sel { flex: 1 1 calc(50% - 5px); } .mp-search button.mp-go { flex: 1 1 100%; }
    .mp-table thead { display: none; }
    .mp-table, .mp-table tbody, .mp-table tr, .mp-table td { display: block; width: 100%; box-sizing: border-box; }
    .mp-table tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; padding: 6px 4px; }
    .mp-table td { border: 0; padding: 4px 10px; }
    .mp-table td[data-k]::before { content: attr(data-k) ": "; color: var(--muted); font-size: 11.5px; text-transform: uppercase; }
    .mp-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; gap: 10px; align-items: center;
      justify-content: space-between; padding: 10px 14px; background: #fff; border-top: 1px solid var(--line);
      box-shadow: 0 -8px 24px rgba(11,30,52,.10); }
    .mp-sticky b { font-size: 20px; } .mp-sticky .mp-btn { padding: 12px 18px; font-size: 15px; }
  }