:root{
      --bg: #ffffff;
      --line: #e6e6e6;
      --text: #111;
      --muted: #666;
      --stripe: #f7f7f7;
      --link: #0b66c3;
    }


    .wrap{
      margin: 4em auto;
    }

    /* ---------- Desktop grid (table-like) ---------- */
    .compare{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
    }

    /* Grid: 1 label column + N product columns */
    .compare-grid{
      display: grid;
      grid-template-columns: minmax(220px, 300px) repeat(var(--cols), minmax(180px, 1fr));
    }

    .cell{
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      border-right: 1px solid var(--line);
      font-size: 14px;
      line-height: 1.35;
      background: #fff;
    }
    .cell:last-child{
      border-right: none;
    }

    /* Top row (images) */
    .cell--top{
      padding: 18px 16px;
      background: #fff;
      vertical-align: middle;
    }
    .product-top{
      display:flex;
      flex-direction: column;
      gap: 10px;
      align-items: center;
      text-align: center;
    }
    .product-top img{
      width: 350px;
      height: 175px;
      object-fit: contain;
      display:block;
    }
    .product-top .sku{
      font-size: 13px;
      color: var(--muted);
    }
    .product-top a{
      color: var(--link);
      text-decoration: none;
      font-weight: 600;
    }
    .product-top a:hover{ text-decoration: underline; }

    /* Left label column */
    .row-label{
      font-weight: 600;
      color: #222;
      background: #fff;
    }

    /* Zebra striping by row (excluding the top image row) */
    .stripe{
      background: var(--stripe);
    }

    /* Remove bottom border for last row */
    .compare-grid .cell[data-last="true"]{
      border-bottom: none;
    }

    /* ---------- Mobile cards ---------- */
    .compare-mobile{
      display:none;
      gap: 14px;
    }

    .card{
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: #fff;
    }

    .card-head{
      padding: 14px 16px;
      border-bottom: 1px solid var(--line);
      display:flex;
      gap: 12px;
      align-items:center;
    }

    .card-head img{
      width: 92px;
      height: 56px;
      object-fit: contain;
      flex: 0 0 auto;
    }

    .card-head .meta{
      display:flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }

    .card-head a{
      color: var(--link);
      text-decoration:none;
      font-weight:700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .card-head .sku{
      color: var(--muted);
      font-size: 13px;
    }

    .kv{
      display:grid;
      grid-template-columns: 1fr;
    }

    .kv-row{
      padding: 12px 16px;
      border-bottom: 1px solid var(--line);
    }
    .kv-row:nth-child(even){
      background: var(--stripe);
    }
    .kv-row:last-child{
      border-bottom:none;
    }

    .k{
      font-size: 12px;
      color: var(--muted);
      margin-bottom: 4px;
      font-weight: 600;
    }
    .v{
      font-size: 14px;
      color: var(--text);
    }

    /* ---------- Responsive switch ---------- */
    @media (max-width: 820px){
      .compare{ display:none; }
      .compare-mobile{
        display:grid;
      }
    }