/* The Compare page (render-compare-html.js). Built on product.css. */
.cmp-page [hidden]{display:none !important}
.cmp{max-width:1160px;margin:0 auto}
.cmp h1{font:700 32px/1.2 var(--font-head);margin:12px 0 10px}
.cmp .lead{font-size:18px}
.cmp-tools{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;margin:0 0 12px}
.check{display:inline-flex;align-items:center;gap:10px;font-size:16px;min-height:44px;cursor:pointer}
.check input{width:22px;height:22px;accent-color:var(--accent-raw)}
.link-btn{min-height:44px;padding:8px 2px;border:0;background:none;font:600 16px var(--font-body);color:var(--accent);text-decoration:underline;cursor:pointer;display:inline-flex;align-items:center}
.link-btn.del{color:#b3261e}
/* A table that scrolls sideways on a phone, its label column held in place. */
.cmp-scroll{overflow-x:auto;border:1px solid #e1e1e6;border-radius:14px;-webkit-overflow-scrolling:touch}
.cmp-scroll:focus-visible{outline:3px solid var(--accent-raw)}
.cmp-table{border-collapse:separate;border-spacing:0;width:100%;min-width:calc(150px + var(--n) * 200px);table-layout:fixed;font-size:16px}
.cmp-table th,.cmp-table td{padding:12px 14px;vertical-align:top;text-align:left;border-bottom:1px solid #ececf0;overflow-wrap:anywhere}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table tbody th{position:sticky;left:0;z-index:1;width:150px;background:#f7f7f9;font-weight:700;font-size:15px;color:#3a3a3c}
.cmp-table thead td{position:sticky;left:0;z-index:1;width:150px;background:#fff}
.cmp-table thead th{font-weight:400;background:#fff}
.cmp-table tr.differ td{background:#fffaf0}
.cmp-table.only-diff tbody tr:not(.differ){display:none}
.c-photo img,.c-ph{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:#f2f2f4;border:1px solid #e5e5ea}
.c-name{display:block;margin-top:8px;font-weight:700;font-size:17px;color:#1d1d1f;text-decoration:none}
.c-name:hover{text-decoration:underline}
.c-ref{display:block;font-size:14px;color:#55595e}
@media (max-width:600px){.cmp-table{min-width:calc(112px + var(--n) * 170px)}.cmp-table tbody th,.cmp-table thead td{width:112px}}

/* Compare tick on store cards / product page, and the tray (store.css + product.css pages load this too) */
.cmp-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 12px 4px 8px;border:2px solid #c7c7cc;border-radius:22px;background:#fff;font:600 15px var(--font-body);color:#1d1d1f;cursor:pointer}
.cmp-toggle input{width:20px;height:20px;accent-color:var(--accent-raw);margin:0}
.cmp-toggle:has(input:checked){border-color:var(--accent-raw);background:#faf6f1}
.cmp-tray{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:12px;width:min(560px,calc(100vw - 24px));padding:10px 12px 10px 18px;border-radius:30px;background:#1d1d1f;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3);font-size:16px}
.cmp-tray .n{flex:1;min-width:0}
.cmp-tray a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:22px;background:var(--accent-raw);color:var(--on-accent);font-weight:700;text-decoration:none}
.cmp-tray button{min-height:44px;border:0;background:none;color:#fff;font:600 15px var(--font-body);text-decoration:underline;cursor:pointer}
.swipe-hint{display:none;margin:0 0 8px;font-size:15px;color:#3a3a3c}
@media (max-width:600px){.swipe-hint{display:block}}
.cmp-pp{align-self:flex-start}