/* CAP Compare — additions only; the compare-page grid/buttons keep Jet's original styling untouched. */

/* Tab pre-collapse lives in cap-compare.js (prepTabs): the inactive category sections are
   hidden at parse time, before first paint, so the page never shows all 9 grids stacked
   and then snaps to one (layout shift / CLS, a Core Web Vitals SEO metric). */

/* Toast (unified: max-3 warning + "Compare cleared" confirmation) — brand blue, white text */
.cap-cmp-toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(16px); bottom: 72px; background: #1a6bb5; color: #fff; padding: 14px 22px; border-radius: 8px; opacity: 0; transition: opacity .25s, transform .25s; z-index: 99999; font-size: 15px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none; }
.cap-cmp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Add-to-compare feedback: bounce the scale button + pop the count. GPU-only, reduced-motion safe. */
@keyframes capCmpPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.cap-cmp-anim { animation: capCmpPop .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .cap-cmp-anim { animation: none; } }

/* Results table — matched to the original Jet compare table look:
   right-aligned blue row labels, clean rows, trash-icon remove. */
.cap-cmp-wrap { overflow-x: auto; }
.cap-cmp-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.cap-cmp-table th, .cap-cmp-table td { border-bottom: 1px solid #e6e6e6; padding: 14px 16px; vertical-align: top; font-size: 14px; }
.cap-cmp-table th { width: 260px; text-align: right; color: #1a6bb5; font-weight: 600; background: transparent; }
.cap-cmp-table td { text-align: left; color: #333; }
.cap-cmp-table img { max-width: 180px; height: auto; }
.cap-cmp-title { margin-top: 8px; font-weight: 700; }
.cap-cmp-row-remove td { border-bottom: none; padding-bottom: 0; }
.cap-cmp-remove { background: none; border: none; color: #9a9a9a; cursor: pointer; padding: 4px; line-height: 0; transition: color .15s; }
.cap-cmp-remove:hover { color: #c0392b; }
.cap-cmp-remove svg { width: 20px; height: 20px; display: block; }
.cap-cmp-empty { padding: 24px; background: #f7f7f7; border-radius: 6px; font-size: 15px; }
.cap-cmp-back { display: inline-block; margin-top: 14px; }

/* Deferred grid images: hold their box (no layout shift) + fade in on load (no pop/flicker). */
.cap-img-hold { background: #f4f4f4; opacity: 0; transition: opacity .3s ease; }
.cap-img-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .cap-img-hold, .cap-img-in { transition: none; } }