    <button id="profileToggle"></button>
    <button id="profileClose"></button>
    <button id="profileSave"></button>
    <button id="syncVaultBtn"></button>
    <select id="profileMaxStores"></select>

    <textarea id="cardsInput"></textarea>
    <textarea id="paymentMethodsInput"></textarea>

    <input id="credentialUserInput" />
    <input id="credentialPasswordInput" />
    <input id="credentialDocumentInput" />
    <button id="credentialClose"></button>
    <button id="credentialSaveBtn"></button>
    <button id="credentialClearBtn"></button>
    <button id="credentialImportBtn"></button>

    <textarea id="compareListInput"></textarea>
    <button id="compareListBtn"></button>
    <button id="pickerClose"></button>
    <button id="pickerBack"></button>
    <button id="pickerNext"></button>

    <input id="pickerQuery" />

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Carrito Virtual · Supermercados</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    :root {
      --bg:       #0b0b12;
      --surface:  #13131e;
      --surface2: #1a1a28;
      --surface3: #1f1f30;
      --border:   #232335;
      --border2:  #2d2d42;
      --text:     #e2e2f0;
      --muted:    #55556e;
      --dim:      #3a3a52;
      --accent:   #f59e0b;
      --accent-dim: rgba(245,158,11,.08);
      --price:    #34d399;
      --price-dim: rgba(52,211,153,.08);
      --danger:   #f87171;
      --font:     'Syne', system-ui, sans-serif;
      --mono:     'IBM Plex Mono', monospace;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg); color: var(--text); font-family: var(--font);
      min-height: 100vh; font-size: 14px; line-height: 1.5;
      background-image:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(245,158,11,.03) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(52,211,153,.02) 0%, transparent 50%);
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: var(--font); cursor: pointer; background: none; border: none; color: var(--text); }
    input { font-family: var(--font); color: var(--text); }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .topbar {
      position: sticky; top: 0; z-index: 100;
      background: rgba(11,11,18,.92); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border); padding: 0 20px;
    }
    .topbar-inner {
      max-width: 1440px; margin: 0 auto; height: 56px;
      display: flex; align-items: center; gap: 16px;
    }
    .logo { font-size: 18px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; flex-shrink: 0; }
    .logo em { color: var(--accent); font-style: normal; }
    .search-box { flex: 1; max-width: 560px; position: relative; }
    .search-box input {
      width: 100%; height: 38px; padding: 0 14px 0 38px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; font-size: 13px; outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,.08); }
    .search-box input::placeholder { color: var(--muted); }
    .search-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      width: 15px; height: 15px; color: var(--muted); pointer-events: none; transition: color .15s;
    }
    .search-box input:focus ~ .search-icon { color: var(--accent); }
    .cart-toggle {
      display: none; position: relative; padding: 8px;
      border-radius: 8px; transition: background .15s;
    }
    .cart-toggle:hover { background: var(--surface2); }
    .cart-toggle svg { width: 20px; height: 20px; color: var(--accent); }
    .cart-badge {
      position: absolute; top: 2px; right: 2px;
      min-width: 16px; height: 16px; padding: 0 4px;
      background: var(--accent); color: var(--bg);
      font-family: var(--mono); font-size: 9px; font-weight: 600;
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
    }
    .nav-link {
      font-size: 11px; color: var(--muted); font-family: var(--mono);
      padding: 4px 8px; border-radius: 6px; transition: color .15s; white-space: nowrap;
    }
    .nav-link:hover { color: var(--accent); }

    .main {
      max-width: 1440px; margin: 0 auto; padding: 20px;
      display: grid; grid-template-columns: 1fr 380px; gap: 20px;
      min-height: calc(100vh - 56px);
    }
    .left { min-width: 0; }
    .right {
      position: sticky; top: 76px; align-self: start;
      max-height: calc(100vh - 96px); display: flex; flex-direction: column;
    }

    .stores-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .store-pill {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border);
      font-size: 11px; transition: border-color .15s, transform .1s; cursor: default;
    }
    .store-pill:hover { border-color: var(--border2); transform: translateY(-1px); }
    .store-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .store-pill .sname { font-weight: 700; letter-spacing: -.01em; }
    .store-pill .scount { font-family: var(--mono); font-size: 10px; color: var(--muted); }
    .store-pill .sfresh {
      font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 999px;
      background: rgba(255,255,255,.04); color: var(--muted);
    }
    .store-pill .sdate { font-family: var(--mono); font-size: 9px; color: var(--dim); }
    .store-pill.is-fresh .sfresh { color: var(--price); background: rgba(52,211,153,.10); }
    .store-pill.is-stale { border-color: rgba(248,113,113,.22); background: rgba(248,113,113,.04); }
    .store-pill.is-stale .sfresh { color: #fca5a5; background: rgba(248,113,113,.12); }
    .data-status {
      margin: -4px 0 16px; padding: 10px 12px; border-radius: 10px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--muted); font-size: 11px; line-height: 1.45;
    }
    .data-status.ok {
      border-color: rgba(52,211,153,.18);
      background: rgba(52,211,153,.06);
      color: #9ae6b4;
    }
    .data-status.warn {
      border-color: rgba(245,158,11,.22);
      background: rgba(245,158,11,.08);
      color: #fcd34d;
    }
    .filter-bar {
      margin: 0 0 14px;
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto auto;
      gap: 8px; align-items: end;
      padding: 12px; border-radius: 12px;
      background: var(--surface); border: 1px solid var(--border);
    }
    .filter-bar.active { border-color: rgba(96,165,250,.2); }
    .filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .filter-field span {
      font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
      text-transform: uppercase; color: var(--muted);
    }
    .filter-field select {
      width: 100%; height: 36px; padding: 0 10px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text); font-size: 12px; outline: none;
    }
    .filter-field select:focus { border-color: rgba(96,165,250,.35); }
    .filter-check {
      display: flex; align-items: center; gap: 8px; min-height: 36px;
      padding: 0 10px; border-radius: 8px; background: var(--surface2);
      border: 1px solid var(--border); color: var(--muted); font-size: 12px;
      white-space: nowrap;
    }
    .filter-check input { accent-color: var(--accent); }
    .filter-reset {
      height: 36px; padding: 0 12px; border-radius: 8px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: 11px; font-weight: 700;
      transition: all .15s;
    }
    .filter-reset:hover { border-color: var(--border2); color: var(--text); }

    .results-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
    .results-header h2 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
    .results-header .rcount { font-family: var(--mono); font-size: 11px; color: var(--dim); }
    .results-list { display: flex; flex-direction: column; gap: 8px; }
    .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 13px; }
    .empty-state .big { font-size: 40px; margin-bottom: 12px; opacity: .3; font-weight: 800; }

    .pcard {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px 16px;
      transition: border-color .15s, box-shadow .15s; animation: slideUp .3s ease both;
    }
    .pcard:hover { border-color: var(--border2); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
    @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .pcard-main { display: flex; gap: 12px; align-items: flex-start; }
    .pcard-media {
      width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
      border: 1px solid var(--border); background: var(--surface2); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pcard-media.placeholder {
      color: var(--dim); font-size: 22px; font-weight: 800;
      background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(96,165,250,.08));
    }
    .pcard-content { flex: 1; min-width: 0; }
    .pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .pcard-info { flex: 1; min-width: 0; }
    .pcard-name {
      font-size: 13px; font-weight: 700; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .pcard-meta {
      font-family: var(--mono); font-size: 10px; color: var(--muted);
      margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap;
    }
    .pcard-meta .ean { color: var(--dim); }
    .pcard-best { text-align: right; flex-shrink: 0; }
    .pcard-best .price { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--price); line-height: 1; }
    .pcard-best .store-label { font-size: 10px; font-weight: 700; margin-top: 2px; }
    .pcard-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
    .promo-badge {
      display: inline-flex; align-items: center; max-width: 100%;
      padding: 3px 7px; border-radius: 999px;
      border: 1px solid rgba(245,158,11,.18); background: rgba(245,158,11,.08);
      color: #fcd34d; font-size: 9px; font-weight: 700; letter-spacing: .02em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .promo-badge.more { color: var(--muted); border-color: var(--border); background: var(--surface2); }

    .pcard-prices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
    .price-chip {
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
      padding: 3px 8px; border-radius: 6px;
      background: var(--surface2); font-size: 10px;
      border: 1px solid transparent; transition: border-color .1s, transform .1s;
      color: inherit; text-decoration: none;
    }
    .price-chip.is-best { background: var(--price-dim); border-color: rgba(52,211,153,.2); }
    .price-chip.is-link:hover { border-color: var(--border2); transform: translateY(-1px); }
    .price-chip .pc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .price-chip .pc-store { font-weight: 600; font-size: 9px; }
    .price-chip .pc-price { font-family: var(--mono); font-size: 10px; font-weight: 500; }
    .price-chip .pc-lista-struck { font-family: var(--mono); font-size: 9px; color: var(--muted); text-decoration: line-through; }
    .price-chip .pc-subdeal {
      flex-basis: 100%; padding-left: 10px;
      font-size: 9px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .pcard-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
    .pcard-actions { gap: 8px; flex-wrap: wrap; }
    .btn-store {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 8px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: 11px; font-weight: 700;
      letter-spacing: .02em; transition: all .15s;
    }
    .btn-store:hover { border-color: var(--border2); color: var(--text); transform: translateY(-1px); }
    .btn-detail { color: #93c5fd; border-color: rgba(96,165,250,.18); }
    .btn-detail:hover { border-color: rgba(96,165,250,.34); color: #bfdbfe; }
    .btn-add {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 14px; border-radius: 8px;
      background: var(--accent-dim); border: 1px solid rgba(245,158,11,.2);
      color: var(--accent); font-size: 11px; font-weight: 700;
      letter-spacing: .02em; transition: all .15s;
    }
    .btn-add:hover { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4); transform: translateY(-1px); }
    .btn-add svg { width: 12px; height: 12px; }
    .btn-add.added { background: var(--price-dim); border-color: rgba(52,211,153,.2); color: var(--price); pointer-events: none; }

    .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 12px 0; }
    .btn-page {
      padding: 6px 14px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border);
      font-size: 11px; font-weight: 600; color: var(--muted); transition: all .15s;
    }
    .btn-page:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .btn-page:disabled { opacity: .3; cursor: default; }
    .page-info { font-family: var(--mono); font-size: 10px; color: var(--dim); }

    .cart-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; max-height: 100%;
    }
    .cart-head {
      padding: 14px 16px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; background: var(--surface2);
    }
    .cart-head h2 {
      font-size: 15px; font-weight: 800; letter-spacing: -.02em;
      display: flex; align-items: center; gap: 8px;
    }
    .cart-head h2 svg { width: 18px; height: 18px; color: var(--accent); }
    .cart-head-right { display: flex; align-items: center; gap: 8px; }
    .cart-item-count {
      font-family: var(--mono); font-size: 10px; color: var(--muted);
      background: var(--surface); padding: 2px 8px; border-radius: 6px;
    }
    .btn-share {
      padding: 5px 9px; border-radius: 7px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-size: 10px; font-weight: 700;
      letter-spacing: .04em; transition: all .15s;
    }
    .btn-share:hover { border-color: rgba(245,158,11,.3); color: var(--accent); }
    .btn-share.ok { color: var(--price); border-color: rgba(52,211,153,.22); }
    .cart-body { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; }
    .cart-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 12px; }
    .cart-empty .ce-icon { font-size: 28px; opacity: .3; margin-bottom: 8px; }

    .ci {
      padding: 10px 16px; display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid rgba(35,35,53,.5); transition: background .1s;
    }
    .ci:hover { background: rgba(255,255,255,.015); }
    .ci:last-child { border-bottom: none; }
    .ci-info { flex: 1; min-width: 0; }
    .ci-name { font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ci-sub { font-family: var(--mono); font-size: 9px; color: var(--muted); }
    .ci-qty { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
    .ci-qty button {
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 6px; font-size: 14px; font-weight: 700; color: var(--muted); transition: all .1s;
    }
    .ci-qty button:hover { background: var(--surface2); color: var(--text); }
    .ci-qty span { width: 28px; text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 500; }
    .ci-rm {
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 6px; color: var(--dim); transition: all .1s; flex-shrink: 0;
    }
    .ci-rm:hover { background: rgba(248,113,113,.1); color: var(--danger); }
    .ci-rm svg { width: 12px; height: 12px; }

    .cart-foot { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface2); }
    .btn-calc {
      width: 100%; padding: 10px; border-radius: 10px;
      background: var(--accent); color: var(--bg);
      font-size: 13px; font-weight: 800; letter-spacing: -.01em;
      transition: all .15s; position: relative; overflow: hidden;
    }
    .btn-calc:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .btn-calc:active { transform: translateY(0); }
    .btn-calc:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
    .btn-calc .spinner {
      display: none; width: 14px; height: 14px;
      border: 2px solid transparent; border-top-color: var(--bg);
      border-radius: 50%; animation: spin .6s linear infinite;
      margin-right: 6px; vertical-align: middle;
    }
    .btn-calc.loading .spinner { display: inline-block; }
    .btn-calc.loading .btn-text { opacity: .6; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .rp-section {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; margin-top: 12px; overflow: hidden;
    }
    .rp-head {
      padding: 12px 14px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; background: var(--surface2);
    }
    .rp-head h3 { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    .rp-savings {
      font-family: var(--mono); font-size: 11px; font-weight: 600;
      color: var(--price); padding: 2px 8px; border-radius: 6px; background: var(--price-dim);
    }

    .sr-list { padding: 6px; }
    .sr-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 8px; transition: background .1s;
    }
    .sr-item:hover { background: rgba(255,255,255,.02); }
    .sr-rank { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--dim); width: 28px; text-align: center; flex-shrink: 0; }
    .sr-item:first-child .sr-rank { color: var(--price); }
    .sr-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .sr-info { flex: 1; min-width: 0; }
    .sr-chain { font-size: 13px; font-weight: 700; }
    .sr-detail { font-family: var(--mono); font-size: 9px; color: var(--muted); }
    .sr-total { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); flex-shrink: 0; }
    .sr-item:first-child .sr-total { color: var(--price); }
    .sr-missing { font-family: var(--mono); font-size: 9px; color: var(--danger); margin-left: 4px; }

    .ms-total { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border); }
    .ms-total .big { font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--price); }
    .ms-total .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .ms-list { padding: 6px 10px; }
    .ms-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 4px; font-size: 11px; border-bottom: 1px solid rgba(35,35,53,.4);
    }
    .ms-item:last-child { border-bottom: none; }
    .ms-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .ms-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ms-chain { font-size: 9px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
    .ms-qty { font-family: var(--mono); font-size: 10px; color: var(--dim); flex-shrink: 0; }
    .ms-price { font-family: var(--mono); font-size: 11px; font-weight: 500; flex-shrink: 0; }

    body.detail-open { overflow: hidden; }
    .detail-shell[hidden] { display: none; }
    .detail-shell { position: fixed; inset: 0; z-index: 120; }
    .detail-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
    }
    .detail-panel {
      position: absolute; top: 0; right: 0; height: 100%;
      width: min(560px, 100vw); background: var(--surface);
      border-left: 1px solid var(--border); box-shadow: -18px 0 60px rgba(0,0,0,.45);
      display: flex; flex-direction: column;
    }
    .detail-head {
      padding: 16px 18px; border-bottom: 1px solid var(--border);
      background: var(--surface2); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .detail-kicker {
      font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
    }
    .detail-head h2 { font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
    .detail-close {
      padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
      background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700;
    }
    .detail-close:hover { border-color: var(--border2); color: var(--text); }
    .detail-body { padding: 16px 18px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
    .detail-loading { padding: 28px 10px; text-align: center; color: var(--muted); font-size: 12px; }
    .detail-hero { display: flex; gap: 14px; align-items: flex-start; }
    .detail-image {
      width: 88px; height: 88px; border-radius: 14px; border: 1px solid var(--border);
      background: var(--surface2); overflow: hidden; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .detail-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .detail-image.placeholder {
      background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(96,165,250,.10));
      color: var(--dim); font-size: 26px; font-weight: 800;
    }
    .detail-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .detail-copy h3 { font-size: 18px; line-height: 1.25; }
    .detail-meta { font-family: var(--mono); font-size: 10px; color: var(--muted); }
    .detail-link {
      display: inline-flex; align-items: center; width: fit-content;
      padding: 6px 10px; border-radius: 8px; background: rgba(245,158,11,.08);
      border: 1px solid rgba(245,158,11,.16); color: var(--accent);
      font-size: 11px; font-weight: 700;
    }
    .detail-section {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 14px; padding: 12px 14px;
    }
    .detail-section h3 {
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
      margin-bottom: 10px;
    }
    .detail-note { font-size: 11px; color: var(--muted); margin: -2px 0 10px; }
    .detail-stack { display: flex; flex-direction: column; gap: 8px; }
    .detail-price-row, .history-row {
      display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
      padding: 8px 0; border-bottom: 1px solid rgba(35,35,53,.6);
    }
    .detail-price-row:last-child, .history-row:last-child { border-bottom: none; }
    .detail-price-chain, .history-chain {
      display: flex; align-items: center; gap: 8px; min-width: 0;
      font-size: 12px; font-weight: 700;
    }
    .detail-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .detail-price-main { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--price); }
    .detail-price-main .price-compare {
      display: block; font-size: 10px; color: var(--muted); text-decoration: line-through;
    }
    .detail-price-main .price-main { display: block; }
    .detail-price-note {
      display: block; margin-top: 2px;
      font-size: 10px; color: var(--muted); font-weight: 500;
      max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .detail-chain-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.18); }
    .detail-chain-link:hover { color: var(--accent); border-bottom-color: rgba(245,158,11,.28); }
    .detail-price-sub, .history-meta {
      font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: right;
    }
    .history-meta strong { display: block; color: var(--text); font-size: 12px; }
    .history-spark { width: 150px; height: 36px; }
    .history-spark svg { width: 100%; height: 36px; display: block; }
    .detail-empty { font-size: 11px; color: var(--muted); padding: 8px 0; }
    .ms-chain a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.18); }
    .ms-chain a:hover { color: var(--accent); border-bottom-color: rgba(245,158,11,.28); }

    @media (max-width: 900px) {
      .main { grid-template-columns: 1fr; padding: 12px; }
      .right {
        position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 90; max-height: 70vh;
        transform: translateY(calc(100% - 56px));
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.6);
      }
      .right.expanded { transform: translateY(0); }
      .cart-toggle { display: flex; }
      .stores-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
      .store-pill { flex-shrink: 0; }
      .filter-bar { grid-template-columns: 1fr 1fr; }
      .cart-panel { border-radius: 16px 16px 0 0; }
      .cart-head { cursor: pointer; }
      .detail-panel { width: 100%; }
      .history-row { grid-template-columns: 1fr; }
      .history-spark { width: 100%; }
      .history-meta, .detail-price-sub { text-align: left; }
    }

    .shimmer {
      background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
      background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 8px;
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .shimmer-card { height: 120px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="topbar-inner">
      <a href="./carrito.html" class="logo">Carrito <em>Virtual</em></a>
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="Buscar productos por nombre, marca o EAN..." autocomplete="off" />
        <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
      </div>
      <button class="cart-toggle" id="cartToggle" title="Carrito">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        <span class="cart-badge" id="cartBadge" style="display:none">0</span>
      </button>
      <a href="./descuentos.html" class="nav-link">Descuentos</a>
    </div>
  </header>

  <div class="main">
    <div class="left">
      <div class="stores-row" id="storesRow"></div>
      <div class="data-status" id="dataStatus">Cargando cobertura de datos...</div>
      <div class="filter-bar" id="searchFilters" style="display:none">
        <label class="filter-field">
          <span>Marca</span>
          <select id="filterBrand">
            <option value="">Todas las marcas</option>
          </select>
        </label>
        <label class="filter-field">
          <span>Tamano</span>
          <select id="filterMeasure">
            <option value="">Todos los tamanos</option>
          </select>
        </label>
        <label class="filter-field">
          <span>Variante</span>
          <select id="filterVariant">
            <option value="">Todas las variantes</option>
          </select>
        </label>
        <label class="filter-check">
          <input id="filterPromo" type="checkbox" />
          <span>Solo promo</span>
        </label>
        <label class="filter-check">
          <input id="filterLoyalty" type="checkbox" />
          <span>Club/tarjeta</span>
        </label>
        <button class="filter-reset" id="filterReset" type="button">Limpiar</button>
      </div>
      <div id="resultsArea">
        <div class="empty-state">
          <div class="big">/</div>
          <p>Busca un producto para comparar precios entre supermercados</p>
          <p style="margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--dim)">Precios de SEPA + Coto Digital + VTEX</p>
        </div>
      </div>
      <div class="pagination" id="pagination" style="display:none">
        <button class="btn-page" id="prevPage" disabled>« Anterior</button>
        <span class="page-info" id="pageInfo"></span>
        <button class="btn-page" id="nextPage">Siguiente »</button>
      </div>
    </div>

    <div class="right" id="cartSide">
      <div class="cart-panel">
        <div class="cart-head" id="cartHead">
          <h2>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
            Carrito
          </h2>
          <div class="cart-head-right">
            <button class="btn-share" id="btnShare" type="button">Compartir</button>
            <span class="cart-item-count" id="cartCount">0 items</span>
          </div>
        </div>
        <div class="cart-body" id="cartBody">
          <div class="cart-empty"><div class="ce-icon">/</div><p>Agrega productos para calcular<br>el super mas barato</p></div>
        </div>
        <div class="cart-foot">
          <button class="btn-calc" id="btnCalc" disabled>
            <span class="spinner"></span>
            <span class="btn-text">Calcular el mas barato</span>
          </button>
        </div>
      </div>
      <div id="cartResults"></div>
    </div>
  </div>

  <div class="detail-shell" id="detailShell" hidden>
    <div class="detail-backdrop" data-detail-close></div>
    <aside class="detail-panel" role="dialog" aria-modal="true" aria-labelledby="detailTitle">
      <div class="detail-head">
        <div>
          <div class="detail-kicker">Detalle de producto</div>
          <h2 id="detailTitle">Producto</h2>
        </div>
        <button class="detail-close" id="detailClose" type="button">Cerrar</button>
      </div>
      <div class="detail-body" id="detailBody">
        <div class="detail-loading">Selecciona un producto.</div>
      </div>
    </aside>
  </div>

  <script src="carrito.js?v=20260318"></script>
</body>
</html>

+  <!-- stub elements for JS hooks (features not visible in this view) -->

+  <div id="profileShell" style="display:none">

+    <button id="profileToggle"></button>

+    <button id="profileClose"></button>

+    <button id="syncVaultBtn"></button>

+    <select id="profileMaxStores"></select>

+    <textarea id="cardsInput"></textarea>

+    <textarea id="paymentMethodsInput"></textarea>

+  <div id="credentialShell" style="display:none">

+    <input id="credentialPasswordInput" />

+    <input id="credentialDocumentInput" />

+    <button id="credentialClose"></button>

+    <button id="credentialSaveBtn"></button>

+    <button id="credentialClearBtn"></button>

+    <button id="credentialImportBtn"></button>

+  <div id="compareFlowShell" style="display:none">

+    <textarea id="compareListInput"></textarea>

+    <button id="compareListBtn"></button>


Now let me verify all JS IDs are covered:


Bash

grep -oE 'id="[^"]+"' ~/.openclaw/workspace/super-ranking-report/carrito.html | sed 's/id="//;s/"//' | sort -u > /tmp/html_ids.txt
comm -23 /tmp/js_ids.txt /tmp/html_ids.txt | grep -v '^)'

Check for any remaining missing IDs


filterRelated


grep -n "filterRelated\|filterLoyalty" ~/.openclaw/workspace/super-ranking-report/carrito.js | head -10

Check how filterRelated is used in JS


1204:      var related = $('filterRelated');
1209:            '<input id="filterRelated" type="checkbox" />' +
1212:        related = $('filterRelated');
1621:      if (!e.target || e.target.id !== 'filterRelated') return;


Good — `filterRelated` is dynamically injected by the JS itself, so that's fine. Now let me do a quick sanity check that the page actually loads without obvious errors:


curl -s "https://miopenclaw-vnic.tail9799d2.ts.net/preview/carrito/carrito.html" | grep -c "searchInput\|benefitFilters\|profileShell\|carrito.js"

Verify the live page has all required elements


All 4 checks pass. Try **`https://miopenclaw-vnic.tail9799d2.ts.net/preview/carrito/carrito.html`** now — the JS was crashing at startup because `benefitFilters` and ~25 other elements were missing from the HTML. Should work now.


pero ahora no puedo poner la lista completa de compras amigo wtf


grep -n "listInput\|lista\|textarea\|list" ~/.openclaw/workspace/super-ranking-report/carrito.html | head -20

Check if list input exists in current HTML


171:    .results-list { display: flex; flex-direction: column; gap: 8px; }
231:    .price-chip .pc-lista-struck { font-family: var(--mono); font-size: 9px; color: var(--muted); text-decoration: line-through; }
358:    .sr-list { padding: 6px; }
377:    .ms-list { padding: 6px 10px; }
626:    <textarea id="cardsInput"></textarea>
627:    <textarea id="paymentMethodsInput"></textarea>
642:    <textarea id="compareListInput"></textarea>


grep -n "listInput\|importar\|btnImport\|import" ~/.openclaw/workspace/super-ranking-report/carrito.js | head -20

Check how list import works in carrito.js


605:        '.profile-shell[hidden],.picker-shell[hidden],.credential-shell[hidden]{display:none !important}' +
732:              '

Bitwarden descubre/importa credenciales. Las credenciales locales quedan guardadas aparte para automatizar despues sin depender del vault.
<button class="vault-sync" id="syncVaultBtn" type="button">Sincronizar Bitwarden</button>
' +
818:            ? ('local · ' + (credential.localSource === 'bitwarden-import' ? 'importada de Bitwarden' : 'manual') + ' · ' + fmtDateTime(credential.localUpdatedAt))
835:              (credential.bitwardenReady && !credential.storedLocally ? '<button class="credential-action" type="button" data-import-chain="' + attr(chain) + '">Importar</button>' : '') +
859:        ? ('Fuente activa: local · ' + (credential.localSource === 'bitwarden-import' ? 'importada de Bitwarden' : 'manual'))
860:        : (credential.bitwardenReady ? 'Fuente activa: Bitwarden directo. Podés importarla a local para independizarte del vault.' : 'No hay credencial local guardada.');
940:      return fetch(API + '/user/credentials/import-bitwarden', {
945:        if (!r.ok) throw new Error('No se pudo importar desde Bitwarden');
952:        if (!silent) window.alert((payload.importedChains || []).length ? ('Credencial importada: ' + chain) : ('No se encontró credencial en Bitwarden para ' + chain));
1568:      var importBtn = e.target.closest('[data-import-chain]');
1583:      if (importBtn) {
1584:        syncCredentialImport(importBtn.getAttribute('data-import-chain') || '').catch(function(err) {
1585:          window.alert(err.message || 'No se pudo importar la credencial');
1700:        window.alert(err.message || 'No se pudo importar la credencial');


grep -n "compareList\|compareFlow\|sCompareFlow" ~/.openclaw/workspace/super-ranking-report/carrito.js | head -30

Check compare flow / list import feature in carrito.js


520:    var sCompareFlow = null;
701:                '<textarea id="compareListInput" rows="5" placeholder="Ejemplo:
leche entera x2
coca cola 2.25
yerba playadito"></textarea>' +
706:                '
<button class="compare-start" id="compareListBtn" type="button">Verificar y comparar</button>
' +
757:        '
' +
1062:      sCompareFlow = {
1073:      $('compareFlowShell').hidden = false;
1078:      sCompareFlow = null;
1079:      $('compareFlowShell').hidden = true;
1086:      if (!sCompareFlow) return;
1087:      step = sCompareFlow.items[sCompareFlow.index];
1089:        cart = sCompareFlow.items.filter(function(item) { return !!item.selected; }).map(function(item) {
1102:      $('pickerProgress').textContent = (sCompareFlow.index + 1) + ' / ' + sCompareFlow.items.length;
1120:      if (!sCompareFlow) return;
1121:      step = sCompareFlow.items[sCompareFlow.index];
1125:        $('pickerNext').textContent = sCompareFlow.index === sCompareFlow.items.length - 1 ? 'Finalizar' : 'Siguiente';
1147:      $('pickerNext').textContent = sCompareFlow.index === sCompareFlow.items.length - 1 ? 'Armar carrito' : 'Siguiente';
1593:      if (pickBtn && sCompareFlow) {
1594:        sCompareFlow.items[sCompareFlow.index].selected = (sCompareFlow.items[sCompareFlow.index].results || []).filter(function(item) {
1714:    $('compareListBtn').addEventListener('click', function() {
1715:      var lines = parseListLines(($('compareListInput') && $('compareListInput').value) || '');
1723:    $('compareFlowShell').addEventListener('click', function(e) {
1727:      if (!sCompareFlow) return;
1728:      sCompareFlow.index = Math.max(0, sCompareFlow.index - 1);
1732:      if (!sCompareFlow) return;
1733:      if (sCompareFlow.items[sCompareFlow.index] && !sCompareFlow.items[sCompareFlow.index].selected) {
1737:      sCompareFlow.index += 1;


grep -n "ensureEnhancementUi\|function ensureEnhancement" ~/.openclaw/workspace/super-ranking-report/carrito.js

Find ensureEnhancementUi function


678:    function ensureEnhancementUi() {
1561:    ensureEnhancementUi();


sed -n '678,780p' ~/.openclaw/workspace/super-ranking-report/carrito.js

Read ensureEnhancementUi function


function ensureEnhancementUi() {
      var left;
      var topbar;
      var profileBtn;
      if ($('compareCard')) return;
      injectEnhancementStyles();
      topbar = document.querySelector('.topbar-inner');
      if (topbar && !$('profileToggle')) {
        profileBtn = document.createElement('button');
        profileBtn.id = 'profileToggle';
        profileBtn.className = 'profile-open';
        profileBtn.type = 'button';
        profileBtn.textContent = 'Perfil';
        topbar.appendChild(profileBtn);
      }
        left = document.querySelector('.left');
      if (left) {
        left.insertAdjacentHTML('afterbegin', '' +
          '
' +
            '
' +
              '
' +
                '
Planificador
' +
                '
Armá una compra real, no una busqueda suelta.
' +
                '<textarea id="compareListInput" rows="5" placeholder="Ejemplo:
leche entera x2
coca cola 2.25
yerba playadito"></textarea>' +
                '
Pegás la lista, verificás el producto correcto y el sistema compara online, cerca o mixto con costos de envio incluidos.
' +
              '
' +
              '
' +
                '

Modo

' +
                '
<button class="compare-start" id="compareListBtn" type="button">Verificar y comparar</button>
' +
                '

' +
              '
' +
            '
' +
          '
');
      }
      document.body.insertAdjacentHTML('beforeend', '' +
        '
' +
          '

' +
          '
' +
            '

Perfil de compra

Sesiones por tienda, beneficios, medios de pago y costos de envio.

<button class="profile-open" id="profileClose" type="button">Cerrar</button>
' +
            '
' +
              '
Preferencias
' +
              '

' +
              '
' +
                '
Maximo de rutas
<select id="profileMaxStores"><option value="0">Sin limite</option><option value="1">1 ruta</option><option value="2">2 rutas</option><option value="3">3 rutas</option><option value="4">4 rutas</option></select>' +
                '
Medios de pago
<textarea id="paymentMethodsInput" rows="3" placeholder="Visa Galicia
Mastercard BBVA
Debito"></textarea>' +
              '
' +
              '
Programas / tarjetas / loyalty
<textarea id="cardsInput" rows="3" placeholder="Comunidad Coto
Cuenta Carrefour
Club DIA"></textarea>' +
            '
' +
            '
' +
              '
Envio online por cadena
' +
              '

' +
            '
' +
            '
' +
              '
Tiendas conectadas
' +
              '

Bitwarden descubre/importa credenciales. Las credenciales locales quedan guardadas aparte para automatizar despues sin depender del vault.
<button class="vault-sync" id="syncVaultBtn" type="button">Sincronizar Bitwarden</button>
' +
              '

' +
            '
' +
            '<button class="profile-save" id="profileSave" type="button">Guardar perfil</button>' +
          '
' +
        '
' +
        '
' +
          '

' +
          '
' +
            '

Credencial

Guardado local para automatizar sesiones sin depender del vault.

<button class="profile-open" id="credentialClose" type="button">Cerrar</button>
' +
            '
' +
              '

' +
              '
' +
                '
Usuario / email
<input id="credentialUserInput" type="text" placeholder="usuario@correo.com" />' +
                '
Documento
<input id="credentialDocumentInput" type="text" placeholder="Solo si la tienda lo necesita" />' +
              '
' +
              '
Password
<input id="credentialPasswordInput" type="password" placeholder="Dejalo vacio para conservar la actual" />' +
              '
' +
                '<button class="credential-action" id="credentialImportBtn" type="button">Importar Bitwarden</button>' +
                '<button class="credential-action" id="credentialClearBtn" type="button">Borrar local</button>' +
                '<button class="profile-save" id="credentialSaveBtn" type="button">Guardar local</button>' +
              '
' +
            '
' +
          '
' +
        '
' +
        '
' +
          '

' +
          '
' +
            '

Producto

Elegí el producto correcto para cada renglón.

<button class="profile-open" id="pickerClose" type="button">Cerrar</button>
' +
            '

' +
            '
<button class="profile-open" id="pickerBack" type="button">Anterior</button><button class="picker-next" id="pickerNext" type="button">Siguiente</button>
' +
          '
' +
        '
');
    }

    function renderModePills(containerId, activeMode) {
      var host = $(containerId);
      if (!host) return;
      host.innerHTML = [
        { id: 'online', label: 'Online' },
        { id: 'nearby', label: 'Cerca' },
        { id: 'any', label: 'Mixto' }
      ].map(function(mode) {
        return '<button class="mode-pill' + (activeMode === mode.id ? ' active' : '') + '" type="button" data-mode="' + attr(mode.id) + '">' + esc(mode.label) + '</button>';
      }).join('');
    }

    function refreshProfileSummary() {
      var host = $('profileSummary');


grep -n "benefitFilters" ~/.openclaw/workspace/super-ranking-report/carrito.js

Check where benefitFilters is used and created


1172:      var box = $('benefitFilters');
1626:    $('benefitFilters').addEventListener('click', function(e) {


Found it. My stub `id="compareCard"` inside the hidden div is making `ensureEnhancementUi` bail out early (it checks `if ($('compareCard')) return`), which means NONE of the list/profile UI gets injected.

Fix: remove all the stubs except `benefitFilters` (the only one that's truly static), let the JS inject everything else:


Edit

    <button id="profileToggle"></button>
    <button id="profileClose"></button>
    <button id="profileSave"></button>
    <button id="syncVaultBtn"></button>
    <select id="profileMaxStores"></select>

    <textarea id="cardsInput"></textarea>
    <textarea id="paymentMethodsInput"></textarea>

    <input id="credentialUserInput" />
    <input id="credentialPasswordInput" />
    <input id="credentialDocumentInput" />
    <button id="credentialClose"></button>
    <button id="credentialSaveBtn"></button>
    <button id="credentialClearBtn"></button>
    <button id="credentialImportBtn"></button>

    <textarea id="compareListInput"></textarea>
    <button id="compareListBtn"></button>
    <button id="pickerClose"></button>
    <button id="pickerBack"></button>
    <button id="pickerNext"></button>

    <input id="pickerQuery" />


The file /home/ubuntu/.openclaw/workspace/super-ranking-report/carrito.html has been updated successfully.

    <button id="profileToggle"></button>
    <button id="profileClose"></button>
    <button id="profileSave"></button>
    <button id="syncVaultBtn"></button>
    <select id="profileMaxStores"></select>

    <textarea id="cardsInput"></textarea>
    <textarea id="paymentMethodsInput"></textarea>

    <input id="credentialUserInput" />
    <input id="credentialPasswordInput" />
    <input id="credentialDocumentInput" />
    <button id="credentialClose"></button>
    <button id="credentialSaveBtn"></button>
    <button id="credentialClearBtn"></button>
    <button id="credentialImportBtn"></button>

    <textarea id="compareListInput"></textarea>
    <button id="compareListBtn"></button>
    <button id="pickerClose"></button>
    <button id="pickerBack"></button>
    <button id="pickerNext"></button>

    <input id="pickerQuery" />

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Carrito Virtual · Supermercados</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
  <style>
    :root {
      --bg:       #0b0b12;
      --surface:  #13131e;
      --surface2: #1a1a28;
      --surface3: #1f1f30;
      --border:   #232335;
      --border2:  #2d2d42;
      --text:     #e2e2f0;
      --muted:    #55556e;
      --dim:      #3a3a52;
      --accent:   #f59e0b;
      --accent-dim: rgba(245,158,11,.08);
      --price:    #34d399;
      --price-dim: rgba(52,211,153,.08);
      --danger:   #f87171;
      --font:     'Syne', system-ui, sans-serif;
      --mono:     'IBM Plex Mono', monospace;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--bg); color: var(--text); font-family: var(--font);
      min-height: 100vh; font-size: 14px; line-height: 1.5;
      background-image:
        radial-gradient(ellipse 80% 50% at 20% 0%, rgba(245,158,11,.03) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 100%, rgba(52,211,153,.02) 0%, transparent 50%);
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: var(--font); cursor: pointer; background: none; border: none; color: var(--text); }
    input { font-family: var(--font); color: var(--text); }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    .topbar {
      position: sticky; top: 0; z-index: 100;
      background: rgba(11,11,18,.92); backdrop-filter: blur(16px);
      border-bottom: 1px solid var(--border); padding: 0 20px;
    }
    .topbar-inner {
      max-width: 1440px; margin: 0 auto; height: 56px;
      display: flex; align-items: center; gap: 16px;
    }
    .logo { font-size: 18px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; flex-shrink: 0; }
    .logo em { color: var(--accent); font-style: normal; }
    .search-box { flex: 1; max-width: 560px; position: relative; }
    .search-box input {
      width: 100%; height: 38px; padding: 0 14px 0 38px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 10px; font-size: 13px; outline: none;
      transition: border-color .15s, box-shadow .15s;
    }
    .search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,158,11,.08); }
    .search-box input::placeholder { color: var(--muted); }
    .search-icon {
      position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
      width: 15px; height: 15px; color: var(--muted); pointer-events: none; transition: color .15s;
    }
    .search-box input:focus ~ .search-icon { color: var(--accent); }
    .cart-toggle {
      display: none; position: relative; padding: 8px;
      border-radius: 8px; transition: background .15s;
    }
    .cart-toggle:hover { background: var(--surface2); }
    .cart-toggle svg { width: 20px; height: 20px; color: var(--accent); }
    .cart-badge {
      position: absolute; top: 2px; right: 2px;
      min-width: 16px; height: 16px; padding: 0 4px;
      background: var(--accent); color: var(--bg);
      font-family: var(--mono); font-size: 9px; font-weight: 600;
      border-radius: 8px; display: flex; align-items: center; justify-content: center;
    }
    .nav-link {
      font-size: 11px; color: var(--muted); font-family: var(--mono);
      padding: 4px 8px; border-radius: 6px; transition: color .15s; white-space: nowrap;
    }
    .nav-link:hover { color: var(--accent); }

    .main {
      max-width: 1440px; margin: 0 auto; padding: 20px;
      display: grid; grid-template-columns: 1fr 380px; gap: 20px;
      min-height: calc(100vh - 56px);
    }
    .left { min-width: 0; }
    .right {
      position: sticky; top: 76px; align-self: start;
      max-height: calc(100vh - 96px); display: flex; flex-direction: column;
    }

    .stores-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .store-pill {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 12px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border);
      font-size: 11px; transition: border-color .15s, transform .1s; cursor: default;
    }
    .store-pill:hover { border-color: var(--border2); transform: translateY(-1px); }
    .store-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .store-pill .sname { font-weight: 700; letter-spacing: -.01em; }
    .store-pill .scount { font-family: var(--mono); font-size: 10px; color: var(--muted); }
    .store-pill .sfresh {
      font-family: var(--mono); font-size: 9px; padding: 2px 6px; border-radius: 999px;
      background: rgba(255,255,255,.04); color: var(--muted);
    }
    .store-pill .sdate { font-family: var(--mono); font-size: 9px; color: var(--dim); }
    .store-pill.is-fresh .sfresh { color: var(--price); background: rgba(52,211,153,.10); }
    .store-pill.is-stale { border-color: rgba(248,113,113,.22); background: rgba(248,113,113,.04); }
    .store-pill.is-stale .sfresh { color: #fca5a5; background: rgba(248,113,113,.12); }
    .data-status {
      margin: -4px 0 16px; padding: 10px 12px; border-radius: 10px;
      border: 1px solid var(--border); background: var(--surface);
      color: var(--muted); font-size: 11px; line-height: 1.45;
    }
    .data-status.ok {
      border-color: rgba(52,211,153,.18);
      background: rgba(52,211,153,.06);
      color: #9ae6b4;
    }
    .data-status.warn {
      border-color: rgba(245,158,11,.22);
      background: rgba(245,158,11,.08);
      color: #fcd34d;
    }
    .filter-bar {
      margin: 0 0 14px;
      display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto auto auto;
      gap: 8px; align-items: end;
      padding: 12px; border-radius: 12px;
      background: var(--surface); border: 1px solid var(--border);
    }
    .filter-bar.active { border-color: rgba(96,165,250,.2); }
    .filter-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .filter-field span {
      font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
      text-transform: uppercase; color: var(--muted);
    }
    .filter-field select {
      width: 100%; height: 36px; padding: 0 10px;
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 8px; color: var(--text); font-size: 12px; outline: none;
    }
    .filter-field select:focus { border-color: rgba(96,165,250,.35); }
    .filter-check {
      display: flex; align-items: center; gap: 8px; min-height: 36px;
      padding: 0 10px; border-radius: 8px; background: var(--surface2);
      border: 1px solid var(--border); color: var(--muted); font-size: 12px;
      white-space: nowrap;
    }
    .filter-check input { accent-color: var(--accent); }
    .filter-reset {
      height: 36px; padding: 0 12px; border-radius: 8px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: 11px; font-weight: 700;
      transition: all .15s;
    }
    .filter-reset:hover { border-color: var(--border2); color: var(--text); }

    .results-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
    .results-header h2 { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
    .results-header .rcount { font-family: var(--mono); font-size: 11px; color: var(--dim); }
    .results-list { display: flex; flex-direction: column; gap: 8px; }
    .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); font-size: 13px; }
    .empty-state .big { font-size: 40px; margin-bottom: 12px; opacity: .3; font-weight: 800; }

    .pcard {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; padding: 14px 16px;
      transition: border-color .15s, box-shadow .15s; animation: slideUp .3s ease both;
    }
    .pcard:hover { border-color: var(--border2); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
    @keyframes slideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .pcard-main { display: flex; gap: 12px; align-items: flex-start; }
    .pcard-media {
      width: 72px; height: 72px; border-radius: 10px; overflow: hidden;
      border: 1px solid var(--border); background: var(--surface2); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .pcard-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .pcard-media.placeholder {
      color: var(--dim); font-size: 22px; font-weight: 800;
      background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(96,165,250,.08));
    }
    .pcard-content { flex: 1; min-width: 0; }
    .pcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .pcard-info { flex: 1; min-width: 0; }
    .pcard-name {
      font-size: 13px; font-weight: 700; line-height: 1.3;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .pcard-meta {
      font-family: var(--mono); font-size: 10px; color: var(--muted);
      margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap;
    }
    .pcard-meta .ean { color: var(--dim); }
    .pcard-best { text-align: right; flex-shrink: 0; }
    .pcard-best .price { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--price); line-height: 1; }
    .pcard-best .store-label { font-size: 10px; font-weight: 700; margin-top: 2px; }
    .pcard-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
    .promo-badge {
      display: inline-flex; align-items: center; max-width: 100%;
      padding: 3px 7px; border-radius: 999px;
      border: 1px solid rgba(245,158,11,.18); background: rgba(245,158,11,.08);
      color: #fcd34d; font-size: 9px; font-weight: 700; letter-spacing: .02em;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .promo-badge.more { color: var(--muted); border-color: var(--border); background: var(--surface2); }

    .pcard-prices { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
    .price-chip {
      display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
      padding: 3px 8px; border-radius: 6px;
      background: var(--surface2); font-size: 10px;
      border: 1px solid transparent; transition: border-color .1s, transform .1s;
      color: inherit; text-decoration: none;
    }
    .price-chip.is-best { background: var(--price-dim); border-color: rgba(52,211,153,.2); }
    .price-chip.is-link:hover { border-color: var(--border2); transform: translateY(-1px); }
    .price-chip .pc-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .price-chip .pc-store { font-weight: 600; font-size: 9px; }
    .price-chip .pc-price { font-family: var(--mono); font-size: 10px; font-weight: 500; }
    .price-chip .pc-lista-struck { font-family: var(--mono); font-size: 9px; color: var(--muted); text-decoration: line-through; }
    .price-chip .pc-subdeal {
      flex-basis: 100%; padding-left: 10px;
      font-size: 9px; color: var(--muted);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .pcard-actions { margin-top: 10px; display: flex; justify-content: flex-end; }
    .pcard-actions { gap: 8px; flex-wrap: wrap; }
    .btn-store {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 6px 12px; border-radius: 8px;
      background: var(--surface2); border: 1px solid var(--border);
      color: var(--muted); font-size: 11px; font-weight: 700;
      letter-spacing: .02em; transition: all .15s;
    }
    .btn-store:hover { border-color: var(--border2); color: var(--text); transform: translateY(-1px); }
    .btn-detail { color: #93c5fd; border-color: rgba(96,165,250,.18); }
    .btn-detail:hover { border-color: rgba(96,165,250,.34); color: #bfdbfe; }
    .btn-add {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 14px; border-radius: 8px;
      background: var(--accent-dim); border: 1px solid rgba(245,158,11,.2);
      color: var(--accent); font-size: 11px; font-weight: 700;
      letter-spacing: .02em; transition: all .15s;
    }
    .btn-add:hover { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4); transform: translateY(-1px); }
    .btn-add svg { width: 12px; height: 12px; }
    .btn-add.added { background: var(--price-dim); border-color: rgba(52,211,153,.2); color: var(--price); pointer-events: none; }

    .pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; padding: 12px 0; }
    .btn-page {
      padding: 6px 14px; border-radius: 8px;
      background: var(--surface); border: 1px solid var(--border);
      font-size: 11px; font-weight: 600; color: var(--muted); transition: all .15s;
    }
    .btn-page:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
    .btn-page:disabled { opacity: .3; cursor: default; }
    .page-info { font-family: var(--mono); font-size: 10px; color: var(--dim); }

    .cart-panel {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; max-height: 100%;
    }
    .cart-head {
      padding: 14px 16px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; background: var(--surface2);
    }
    .cart-head h2 {
      font-size: 15px; font-weight: 800; letter-spacing: -.02em;
      display: flex; align-items: center; gap: 8px;
    }
    .cart-head h2 svg { width: 18px; height: 18px; color: var(--accent); }
    .cart-head-right { display: flex; align-items: center; gap: 8px; }
    .cart-item-count {
      font-family: var(--mono); font-size: 10px; color: var(--muted);
      background: var(--surface); padding: 2px 8px; border-radius: 6px;
    }
    .btn-share {
      padding: 5px 9px; border-radius: 7px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--muted); font-size: 10px; font-weight: 700;
      letter-spacing: .04em; transition: all .15s;
    }
    .btn-share:hover { border-color: rgba(245,158,11,.3); color: var(--accent); }
    .btn-share.ok { color: var(--price); border-color: rgba(52,211,153,.22); }
    .cart-body { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: thin; }
    .cart-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 12px; }
    .cart-empty .ce-icon { font-size: 28px; opacity: .3; margin-bottom: 8px; }

    .ci {
      padding: 10px 16px; display: flex; align-items: center; gap: 10px;
      border-bottom: 1px solid rgba(35,35,53,.5); transition: background .1s;
    }
    .ci:hover { background: rgba(255,255,255,.015); }
    .ci:last-child { border-bottom: none; }
    .ci-info { flex: 1; min-width: 0; }
    .ci-name { font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ci-sub { font-family: var(--mono); font-size: 9px; color: var(--muted); }
    .ci-qty { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
    .ci-qty button {
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 6px; font-size: 14px; font-weight: 700; color: var(--muted); transition: all .1s;
    }
    .ci-qty button:hover { background: var(--surface2); color: var(--text); }
    .ci-qty span { width: 28px; text-align: center; font-family: var(--mono); font-size: 12px; font-weight: 500; }
    .ci-rm {
      width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
      border-radius: 6px; color: var(--dim); transition: all .1s; flex-shrink: 0;
    }
    .ci-rm:hover { background: rgba(248,113,113,.1); color: var(--danger); }
    .ci-rm svg { width: 12px; height: 12px; }

    .cart-foot { padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface2); }
    .btn-calc {
      width: 100%; padding: 10px; border-radius: 10px;
      background: var(--accent); color: var(--bg);
      font-size: 13px; font-weight: 800; letter-spacing: -.01em;
      transition: all .15s; position: relative; overflow: hidden;
    }
    .btn-calc:hover { filter: brightness(1.1); transform: translateY(-1px); }
    .btn-calc:active { transform: translateY(0); }
    .btn-calc:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
    .btn-calc .spinner {
      display: none; width: 14px; height: 14px;
      border: 2px solid transparent; border-top-color: var(--bg);
      border-radius: 50%; animation: spin .6s linear infinite;
      margin-right: 6px; vertical-align: middle;
    }
    .btn-calc.loading .spinner { display: inline-block; }
    .btn-calc.loading .btn-text { opacity: .6; }
    @keyframes spin { to { transform: rotate(360deg); } }

    .rp-section {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 12px; margin-top: 12px; overflow: hidden;
    }
    .rp-head {
      padding: 12px 14px; border-bottom: 1px solid var(--border);
      display: flex; align-items: center; justify-content: space-between; background: var(--surface2);
    }
    .rp-head h3 { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
    .rp-savings {
      font-family: var(--mono); font-size: 11px; font-weight: 600;
      color: var(--price); padding: 2px 8px; border-radius: 6px; background: var(--price-dim);
    }

    .sr-list { padding: 6px; }
    .sr-item {
      display: flex; align-items: center; gap: 10px;
      padding: 8px 10px; border-radius: 8px; transition: background .1s;
    }
    .sr-item:hover { background: rgba(255,255,255,.02); }
    .sr-rank { font-family: var(--mono); font-size: 18px; font-weight: 600; color: var(--dim); width: 28px; text-align: center; flex-shrink: 0; }
    .sr-item:first-child .sr-rank { color: var(--price); }
    .sr-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .sr-info { flex: 1; min-width: 0; }
    .sr-chain { font-size: 13px; font-weight: 700; }
    .sr-detail { font-family: var(--mono); font-size: 9px; color: var(--muted); }
    .sr-total { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--text); flex-shrink: 0; }
    .sr-item:first-child .sr-total { color: var(--price); }
    .sr-missing { font-family: var(--mono); font-size: 9px; color: var(--danger); margin-left: 4px; }

    .ms-total { padding: 12px 14px; text-align: center; border-bottom: 1px solid var(--border); }
    .ms-total .big { font-family: var(--mono); font-size: 28px; font-weight: 600; color: var(--price); }
    .ms-total .sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
    .ms-list { padding: 6px 10px; }
    .ms-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 4px; font-size: 11px; border-bottom: 1px solid rgba(35,35,53,.4);
    }
    .ms-item:last-child { border-bottom: none; }
    .ms-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .ms-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .ms-chain { font-size: 9px; font-weight: 700; color: var(--muted); flex-shrink: 0; }
    .ms-qty { font-family: var(--mono); font-size: 10px; color: var(--dim); flex-shrink: 0; }
    .ms-price { font-family: var(--mono); font-size: 11px; font-weight: 500; flex-shrink: 0; }

    body.detail-open { overflow: hidden; }
    .detail-shell[hidden] { display: none; }
    .detail-shell { position: fixed; inset: 0; z-index: 120; }
    .detail-backdrop {
      position: absolute; inset: 0;
      background: rgba(0,0,0,.7); backdrop-filter: blur(8px);
    }
    .detail-panel {
      position: absolute; top: 0; right: 0; height: 100%;
      width: min(560px, 100vw); background: var(--surface);
      border-left: 1px solid var(--border); box-shadow: -18px 0 60px rgba(0,0,0,.45);
      display: flex; flex-direction: column;
    }
    .detail-head {
      padding: 16px 18px; border-bottom: 1px solid var(--border);
      background: var(--surface2); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    }
    .detail-kicker {
      font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
    }
    .detail-head h2 { font-size: 20px; line-height: 1.1; letter-spacing: -.02em; }
    .detail-close {
      padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
      background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 700;
    }
    .detail-close:hover { border-color: var(--border2); color: var(--text); }
    .detail-body { padding: 16px 18px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
    .detail-loading { padding: 28px 10px; text-align: center; color: var(--muted); font-size: 12px; }
    .detail-hero { display: flex; gap: 14px; align-items: flex-start; }
    .detail-image {
      width: 88px; height: 88px; border-radius: 14px; border: 1px solid var(--border);
      background: var(--surface2); overflow: hidden; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .detail-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .detail-image.placeholder {
      background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(96,165,250,.10));
      color: var(--dim); font-size: 26px; font-weight: 800;
    }
    .detail-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
    .detail-copy h3 { font-size: 18px; line-height: 1.25; }
    .detail-meta { font-family: var(--mono); font-size: 10px; color: var(--muted); }
    .detail-link {
      display: inline-flex; align-items: center; width: fit-content;
      padding: 6px 10px; border-radius: 8px; background: rgba(245,158,11,.08);
      border: 1px solid rgba(245,158,11,.16); color: var(--accent);
      font-size: 11px; font-weight: 700;
    }
    .detail-section {
      background: var(--surface2); border: 1px solid var(--border);
      border-radius: 14px; padding: 12px 14px;
    }
    .detail-section h3 {
      font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
      margin-bottom: 10px;
    }
    .detail-note { font-size: 11px; color: var(--muted); margin: -2px 0 10px; }
    .detail-stack { display: flex; flex-direction: column; gap: 8px; }
    .detail-price-row, .history-row {
      display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center;
      padding: 8px 0; border-bottom: 1px solid rgba(35,35,53,.6);
    }
    .detail-price-row:last-child, .history-row:last-child { border-bottom: none; }
    .detail-price-chain, .history-chain {
      display: flex; align-items: center; gap: 8px; min-width: 0;
      font-size: 12px; font-weight: 700;
    }
    .detail-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .detail-price-main { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--price); }
    .detail-price-main .price-compare {
      display: block; font-size: 10px; color: var(--muted); text-decoration: line-through;
    }
    .detail-price-main .price-main { display: block; }
    .detail-price-note {
      display: block; margin-top: 2px;
      font-size: 10px; color: var(--muted); font-weight: 500;
      max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .detail-chain-link { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.18); }
    .detail-chain-link:hover { color: var(--accent); border-bottom-color: rgba(245,158,11,.28); }
    .detail-price-sub, .history-meta {
      font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: right;
    }
    .history-meta strong { display: block; color: var(--text); font-size: 12px; }
    .history-spark { width: 150px; height: 36px; }
    .history-spark svg { width: 100%; height: 36px; display: block; }
    .detail-empty { font-size: 11px; color: var(--muted); padding: 8px 0; }
    .ms-chain a { color: inherit; text-decoration: none; border-bottom: 1px dotted rgba(255,255,255,.18); }
    .ms-chain a:hover { color: var(--accent); border-bottom-color: rgba(245,158,11,.28); }

    @media (max-width: 900px) {
      .main { grid-template-columns: 1fr; padding: 12px; }
      .right {
        position: fixed; bottom: 0; left: 0; right: 0;
        z-index: 90; max-height: 70vh;
        transform: translateY(calc(100% - 56px));
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        border-radius: 16px 16px 0 0; box-shadow: 0 -8px 40px rgba(0,0,0,.6);
      }
      .right.expanded { transform: translateY(0); }
      .cart-toggle { display: flex; }
      .stores-row { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
      .store-pill { flex-shrink: 0; }
      .filter-bar { grid-template-columns: 1fr 1fr; }
      .cart-panel { border-radius: 16px 16px 0 0; }
      .cart-head { cursor: pointer; }
      .detail-panel { width: 100%; }
      .history-row { grid-template-columns: 1fr; }
      .history-spark { width: 100%; }
      .history-meta, .detail-price-sub { text-align: left; }
    }

    .shimmer {
      background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
      background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 8px;
    }
    @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
    .shimmer-card { height: 120px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <header class="topbar">
    <div class="topbar-inner">
      <a href="./carrito.html" class="logo">Carrito <em>Virtual</em></a>
      <div class="search-box">
        <input type="text" id="searchInput" placeholder="Buscar productos por nombre, marca o EAN..." autocomplete="off" />
        <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
      </div>
      <button class="cart-toggle" id="cartToggle" title="Carrito">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
        <span class="cart-badge" id="cartBadge" style="display:none">0</span>
      </button>
      <a href="./descuentos.html" class="nav-link">Descuentos</a>
    </div>
  </header>

  <div class="main">
    <div class="left">
      <div class="stores-row" id="storesRow"></div>
      <div class="data-status" id="dataStatus">Cargando cobertura de datos...</div>
      <div class="filter-bar" id="searchFilters" style="display:none">
        <label class="filter-field">
          <span>Marca</span>
          <select id="filterBrand">
            <option value="">Todas las marcas</option>
          </select>
        </label>
        <label class="filter-field">
          <span>Tamano</span>
          <select id="filterMeasure">
            <option value="">Todos los tamanos</option>
          </select>
        </label>
        <label class="filter-field">
          <span>Variante</span>
          <select id="filterVariant">
            <option value="">Todas las variantes</option>
          </select>
        </label>
        <label class="filter-check">
          <input id="filterPromo" type="checkbox" />
          <span>Solo promo</span>
        </label>
        <label class="filter-check">
          <input id="filterLoyalty" type="checkbox" />
          <span>Club/tarjeta</span>
        </label>
        <button class="filter-reset" id="filterReset" type="button">Limpiar</button>
      </div>
      <div id="resultsArea">
        <div class="empty-state">
          <div class="big">/</div>
          <p>Busca un producto para comparar precios entre supermercados</p>
          <p style="margin-top:8px;font-family:var(--mono);font-size:10px;color:var(--dim)">Precios de SEPA + Coto Digital + VTEX</p>
        </div>
      </div>
      <div class="pagination" id="pagination" style="display:none">
        <button class="btn-page" id="prevPage" disabled>« Anterior</button>
        <span class="page-info" id="pageInfo"></span>
        <button class="btn-page" id="nextPage">Siguiente »</button>
      </div>
    </div>

    <div class="right" id="cartSide">
      <div class="cart-panel">
        <div class="cart-head" id="cartHead">
          <h2>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
            Carrito
          </h2>
          <div class="cart-head-right">
            <button class="btn-share" id="btnShare" type="button">Compartir</button>
            <span class="cart-item-count" id="cartCount">0 items</span>
          </div>
        </div>
        <div class="cart-body" id="cartBody">
          <div class="cart-empty"><div class="ce-icon">/</div><p>Agrega productos para calcular<br>el super mas barato</p></div>
        </div>
        <div class="cart-foot">
          <button class="btn-calc" id="btnCalc" disabled>
            <span class="spinner"></span>
            <span class="btn-text">Calcular el mas barato</span>
          </button>
        </div>
      </div>
      <div id="cartResults"></div>
    </div>
  </div>

  <div class="detail-shell" id="detailShell" hidden>
    <div class="detail-backdrop" data-detail-close></div>
    <aside class="detail-panel" role="dialog" aria-modal="true" aria-labelledby="detailTitle">
      <div class="detail-head">
        <div>
          <div class="detail-kicker">Detalle de producto</div>
          <h2 id="detailTitle">Producto</h2>
        </div>
        <button class="detail-close" id="detailClose" type="button">Cerrar</button>
      </div>
      <div class="detail-body" id="detailBody">
        <div class="detail-loading">Selecciona un producto.</div>
      </div>
    </aside>
  </div>

  <!-- stub elements for JS hooks (features not visible in this view) -->
  <div id="benefitFilters" style="display:none"></div>
  <div id="profileShell" style="display:none">
    <div id="profileSummary"></div>
    <button id="profileToggle"></button>
    <button id="profileClose"></button>
    <button id="profileSave"></button>
    <button id="syncVaultBtn"></button>
    <select id="profileMaxStores"></select>
    <div id="accountGrid"></div>
    <div id="shippingGrid"></div>
    <textarea id="cardsInput"></textarea>
    <textarea id="paymentMethodsInput"></textarea>
  </div>
  <div id="credentialShell" style="display:none">
    <div id="credentialTitle"></div>
    <div id="credentialSourceNote"></div>
    <input id="credentialUserInput" />
    <input id="credentialPasswordInput" />
    <input id="credentialDocumentInput" />
    <button id="credentialClose"></button>
    <button id="credentialSaveBtn"></button>
    <button id="credentialClearBtn"></button>
    <button id="credentialImportBtn"></button>
  </div>
  <div id="compareFlowShell" style="display:none">
    <div id="compareCard"></div>
    <textarea id="compareListInput"></textarea>
    <button id="compareListBtn"></button>
    <button id="pickerClose"></button>
    <button id="pickerBack"></button>
    <button id="pickerNext"></button>
    <div id="pickerProgress"></div>
    <div id="pickerHint"></div>
    <input id="pickerQuery" />
    <div id="pickerList"></div>
  </div>

  <script src="carrito.js?v=20260318"></script>
</body>
</html>

-  <!-- stub elements for JS hooks (features not visible in this view) -->

+  <!-- benefitFilters is a static element the JS attaches events to directly -->

-  <div id="profileShell" style="display:none">

-    <button id="profileToggle"></button>

-    <button id="profileClose"></button>

-    <button id="syncVaultBtn"></button>

-    <select id="profileMaxStores"></select>

-    <textarea id="cardsInput"></textarea>

-    <textarea id="paymentMethodsInput"></textarea>

-  <div id="credentialShell" style="display:none">

-    <input id="credentialPasswordInput" />

-    <input id="credentialDocumentInput" />

-    <button id="credentialClose"></button>

-    <button id="credentialSaveBtn"></button>

-    <button id="credentialClearBtn"></button>

-    <button id="credentialImportBtn"></button>

-  <div id="compareFlowShell" style="display:none">

-    <textarea id="compareListInput"></textarea>

-    <button id="compareListBtn"></button>


Now let me verify the page loads and `ensureEnhancementUi` can inject the compare card:


Bash

curl -s http://localhost:3006/carrito.html | grep -c "compareCard\|profileShell\|benefitFilters\|searchInput"

Verify HTML only has the static stubs, not the dynamic ones


Good — `compareCard` is no longer in the static HTML (only the 3 static ones). The JS will now inject the list textarea, profile drawer, and all other UI on load.

Try **`https://miopenclaw-vnic.tail9799d2.ts.net/preview/carrito/carrito.html`** — the "Planificador" section with the list textarea should now appear above the search results.


<local-command-caveat>Caveat: The messages below were generated by the user while running local commands. DO NOT respond to these messages or otherwise consider them in your response unless the user explicitly asks you to.</local-command-caveat>


<command-name>/exit</command-name>
            <command-message>exit</command-message>
            <command-args></command-args>


<local-command-stdout>Goodbye!</local-command-stdout>