/* /compare (public::compare): units side by side. The first column (labels) stays put while the units scroll sideways on narrow screens. */
.cmp__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; border-bottom: 1px solid #222; padding-bottom: 12px; }
.cmp__head .page-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cmp__lede { margin: 0; color: #aaa; font: 500 16px var(--body); }
.cmp__diff { display: inline-flex; align-items: center; gap: 8px; color: #ddd; font: 600 16px var(--body); cursor: pointer; }
.cmp__diff input { width: 18px; height: 18px; accent-color: var(--red); }

.cmp__add { position: relative; max-width: 620px; margin: 18px 0 6px; }
.cmp__add-label { display: block; margin-bottom: 6px; color: #fff; font: 700 15px var(--cond); text-transform: uppercase; letter-spacing: .04em; }
.cmp__add-box { display: flex; gap: 8px; }
.cmp__add-box input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line); background: #111; color: #fff; font: 500 17px var(--body); }
.cmp__add-box input:focus { outline: 2px solid var(--red); outline-offset: -1px; }
.cmp__results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: #161616; border: 1px solid #333; box-shadow: 0 16px 32px rgba(0,0,0,.6); max-height: 60vh; overflow-y: auto; }
.cmp__results li { display: flex; align-items: center; gap: 12px; padding: 6px 8px; cursor: pointer; }
.cmp__results li[aria-selected="true"], .cmp__results li:hover { background: #262626; }
.cmp__results li[aria-disabled="true"] { opacity: .5; cursor: default; }
.cmp__results img { flex: none; width: 72px; height: 54px; object-fit: cover; background: #fff; }
.cmp__results .r-title { display: block; color: #fff; font: 700 16px/1.2 var(--cond); }
.cmp__results .r-sub { display: block; color: #aaa; font: 500 14px var(--body); }
.cmp__results .r-price { margin-left: auto; color: #fff; font: 700 15px var(--cond); white-space: nowrap; }
.cmp__none { color: #aaa; margin: 8px 0 0; }

.cmp__empty { margin: 30px 0 10px; color: #bbb; font: 500 17px var(--body); }

.cmp__scroll { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp__table { width: 100%; min-width: calc(150px + var(--n) * 210px); border-collapse: collapse; table-layout: fixed; color: #ddd; font: 500 16px/1.35 var(--body); }
.cmp__table th, .cmp__table td { padding: 9px 12px; border-bottom: 1px solid #262626; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.cmp__table tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; width: 150px; background: var(--panel); color: #999; font: 600 14px var(--cond); text-transform: uppercase; letter-spacing: .03em; }
.cmp__corner { position: sticky; left: 0; z-index: 2; width: 150px; background: var(--panel); }
.cmp__unit { position: relative; padding-top: 12px; vertical-align: top; }
.cmp__link { display: block; color: #fff; }
.cmp__link:hover { text-decoration: none; }
.cmp__link:hover .cmp__title { color: var(--red); }
.cmp__img { display: block; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; }
.cmp__img img { width: 100%; height: 100%; object-fit: cover; }
.cmp__title { display: block; margin-top: 8px; font: 700 18px/1.2 var(--cond); }
.cmp__price { display: block; margin: 6px 0 10px; color: #fff; font: 700 22px var(--cond); }
.cmp__cta { white-space: normal; }
.cmp__remove { position: absolute; top: 18px; right: 18px; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,0,0,.75); color: #fff; font: 400 24px/1 var(--cond); }
.cmp__remove:hover, .cmp__remove:focus-visible { background: var(--red); color: #fff; text-decoration: none; }
.cmp__group th { padding-top: 22px; background: transparent; color: var(--red); font: 500 22px var(--cond); border-bottom: 1px solid #3a3a3a; }
.cmp__nil { color: #555; }
.cmp.is-diff tr[data-same], .cmp.is-diff tbody.is-same { display: none; }
.cmp__note { margin: 18px 0 0; color: #888; font: 400 13px/1.5 var(--body); }

@media (max-width: 767px) {
  .cmp__table { min-width: calc(110px + var(--n) * 160px); font-size: 15px; }
  .cmp__table th, .cmp__table td { padding: 8px; }
  .cmp__table tbody th[scope="row"], .cmp__corner { width: 110px; }
  .cmp__table tbody th[scope="row"] { font-size: 12px; overflow-wrap: break-word; hyphens: auto; }
  .cmp__title { font-size: 16px; }
  .cmp__price { font-size: 19px; }
  .cmp__remove { top: 12px; right: 12px; }
  .cmp__results .r-price { display: none; }
}