/* ==========================================================
   Compare — the side-by-side table and its empty state.
   The floating tray and the card button live in site.css,
   because they appear on every page, not only this one.
   ========================================================== */

.vd-compare-scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--vd-line,#ece7e9); border-radius:14px; background:#fff;
}
.vd-compare{
  width:100%; border-collapse:separate; border-spacing:0;
  /* Each column needs room to stay readable; below that the table scrolls
     sideways rather than squeezing four names into unreadable slivers. */
  min-width:calc(150px + var(--cols,3) * 190px);
}
.vd-compare th, .vd-compare td{
  padding:.85rem 1rem; vertical-align:top; text-align:left;
  border-bottom:1px solid var(--vd-line,#ece7e9); font-size:.9rem;
}
.vd-compare tbody th{
  width:150px; min-width:150px; font-weight:600; color:#6c6c72; font-size:.83rem;
  background:#fbfafb; position:sticky; left:0; z-index:2;
}
.vd-compare thead th{
  background:#fff; position:sticky; top:0; z-index:3; border-bottom:2px solid var(--vd-line,#ece7e9);
}
.vd-compare-corner{width:150px; min-width:150px; position:sticky; left:0; z-index:4; background:#fff}
.vd-compare tbody tr:last-child th, .vd-compare tbody tr:last-child td{border-bottom:0}

.vd-compare-head{display:block; text-decoration:none; color:inherit}
.vd-compare-head img,
.vd-compare-head .vd-placeholder{
  display:block; width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:9px; margin-bottom:.5rem; background:var(--vd-brand-tint,#f6eef1);
}
.vd-compare-head .vd-placeholder{display:grid; place-items:center; color:#c7b3bb; font-size:1.4rem}
.vd-compare-name{font-weight:700; line-height:1.3; display:block; font-size:.95rem}
.vd-compare-head:hover .vd-compare-name{color:var(--vd-brand,#b4123f)}

.vd-compare-drop{position:absolute; top:.35rem; right:.35rem; z-index:2}
.vd-compare thead th{position:sticky; top:0}
.vd-compare thead th:not(.vd-compare-corner){position:relative}
.vd-compare-x{
  width:1.6rem; height:1.6rem; border-radius:999px; border:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; display:grid; place-items:center; font-size:.72rem;
}
.vd-compare-x:hover{background:rgba(0,0,0,.8)}

/* The two rows a couple actually decides on. */
.vd-compare tr.is-price td{font-weight:700; color:var(--vd-brand,#b4123f); font-size:.98rem}
.vd-compare tr.is-rating td{font-weight:600}
.vd-compare-na{color:#c2c2c8}
.vd-compare-actions td{background:#fbfafb}
.vd-compare-actions th{background:#fbfafb}

.vd-compare-empty{
  text-align:center; padding:3.5rem 1.5rem; border:1px dashed var(--vd-line,#ece7e9);
  border-radius:16px; background:#fff; max-width:34rem; margin:0 auto;
}
.vd-compare-empty > i{font-size:2.6rem; color:var(--vd-brand,#b4123f); opacity:.35}
.vd-compare-empty p{max-width:26rem; margin:.6rem auto 0; font-size:.92rem}

@media (max-width:575.98px){
  .vd-compare tbody th, .vd-compare-corner{width:116px; min-width:116px; font-size:.78rem}
  .vd-compare th, .vd-compare td{padding:.7rem .75rem; font-size:.85rem}
  .vd-compare{min-width:calc(116px + var(--cols,3) * 160px)}
}