/* partials/_compare_tool.antlers.html — moved out of the template on 2026-10-21 (owner: "move inline css and js to cached files"); edit here, the template loads it with {{ zz_asset:css }} */
.cat-compare{--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23a33d2e' d='M12 2.5l2.9 6.2 6.7.8-5 4.6 1.4 6.7L12 17.4 6 20.8l1.4-6.7-5-4.6 6.7-.8z'/%3E%3C/svg%3E");
margin-top:19.5px;animation:cmpRise .24s cubic-bezier(.23,1,.32,1) both}
.cat-compare[hidden],.cmp-sugg[hidden],.cmp-swipe[hidden]{display:none}
.cmp-box.below{margin-top:14px} /* A/B variant B: the chip bar under the table (owner 2026-10-21) */
@keyframes cmpPop{from{opacity:0;transform:scale(.97) translateY(-4px)}to{opacity:1;transform:none}}
@keyframes cmpRise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cat-compare .ds-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cat-compare button{font:inherit;color:inherit;background:none;border:0;margin:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.cat-compare :focus-visible{outline:2.5px solid #a33d2e;outline-offset:3px;border-radius:var(--r-ctl)}
.cat-compare .stars{display:inline-block;flex-shrink:0;width:calc(var(--sz,14px) * 5);height:var(--sz,14px);background:var(--star) 0 0/var(--sz,14px) var(--sz,14px) repeat-x;letter-spacing:0;
-webkit-mask-image:linear-gradient(90deg,#000 var(--p,0%),rgba(0,0,0,.22) var(--p,0%));mask-image:linear-gradient(90deg,#000 var(--p,0%),rgba(0,0,0,.22) var(--p,0%))}
.cat-compare .arrow{display:block;flex-shrink:0;width:20px;height:12.5px;margin-top:.38em;color:#a33d2e;overflow:visible}
.cat-compare .btn-go{display:flex;align-items:center;justify-content:center;min-height:44px;background:#a33d2e;color:#fff;font:700 15px 'Libre Franklin',sans-serif;padding:0 15px;border-radius:var(--r-ctl);text-align:center;white-space:nowrap;transition:transform .16s cubic-bezier(.23,1,.32,1),filter .15s ease}
.cat-compare .btn-go:hover{opacity:1;filter:brightness(1.06)}
.cat-compare .btn-go:active{transform:scale(.97)}
.cat-compare .lnk{color:#a33d2e;font:600 14px 'Libre Franklin',sans-serif;text-decoration:underline;text-underline-offset:3px}
.cmp-box{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8.5px;background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-card);padding:8.5px 11px;cursor:text}
.cmp-box:focus-within{box-shadow:0 0 0 2.5px #a33d2e}
.cmp-box input:focus-visible{outline:none}
.cmp-chip{display:inline-flex;align-items:center;gap:2px;background:#2b2620;color:#f4eee1;border-radius:999px;font:700 14px 'Libre Franklin',sans-serif;padding:0 2px 0 12px;min-height:36px}
.cmp-chip button{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.cmp-chip button span{width:20px;height:20px;border-radius:50%;background:#f4eee1;color:#2b2620;display:inline-flex;align-items:center;justify-content:center;font:700 14px/1 'Libre Franklin',sans-serif;transition:background-color .15s ease,color .15s ease}
.cmp-chip button:hover span{background:#a33d2e;color:#fff}
.cmp-chip button[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
.cmp-chip button[aria-disabled="true"]:hover span{background:#f4eee1;color:#2b2620}
.cmp-input{flex:1 1 140px;min-width:120px;min-height:36px;border:0;background:transparent;font:500 15px 'Libre Franklin',sans-serif;color:#2b2620;padding:6.5px 4.5px;outline:none}
.cmp-input::placeholder{color:#8a8174}
.cmp-sugg{position:absolute;left:-1.5px;right:-1.5px;top:100%;z-index:5;transform-origin:top left;animation:cmpPop .16s cubic-bezier(.23,1,.32,1);background:#fff;border:1.5px solid #2b2620;border-top:0;border-radius:0 0 var(--r-card) var(--r-card);box-shadow:0 6px 10px rgba(43,38,32,.14);overflow:hidden;max-height:300px;overflow-y:auto}
.cmp-sugg button{width:100%;min-height:44px;display:flex;justify-content:space-between;align-items:center;gap:11px;padding:9.5px 13px;border-top:1px solid #d8cdb6;font:600 15px 'Libre Franklin',sans-serif;text-align:left;transition:background-color .15s ease}
.cmp-sugg button:hover,.cmp-sugg button.active{background:#f4eee1;color:#a33d2e}
.cmp-sugg button span{font:500 14px 'Libre Franklin',sans-serif;color:#6d6455;white-space:nowrap}
.cmp-status{margin:8px 2px 0;font:500 13.5px/1.4 'Libre Franklin',sans-serif;color:#443d34}
.cmp-status:empty{display:none}
.cmp-status a{color:#a33d2e;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cmp-wrap{background:#fff;border:1.5px solid #2b2620;border-radius:var(--r-section);overflow-x:auto;margin-top:7px}
.cmp-table{min-width:var(--cmp-min,0)}
.cmp-r{display:grid;grid-template-columns:var(--cmp-cols);border-bottom:1px solid #d8cdb6}
.cmp-r.head{background:#faf7f0;border-bottom:1.5px solid #2b2620} /* same tone as the label column (owner 2026-09-28: not two different ones) */
.cmp-r:last-child{border-bottom:0}
.cmp-r>div{min-width:0}
.cmp-r>div+div,.cmp-r.head>div+div{border-left:1.5px solid #2b2620}
.cmp-lbl{padding:13px 15px;font:700 15px 'Libre Franklin',sans-serif;color:#2b2620;background:#faf7f0}
.cmp-site{padding:13px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6.5px;position:relative} /* bottom-aligned: a taller square logo in one column must not leave the others hanging at the top (owner 2026-10-04) */
.cmp-site a.cmp-site-link{display:flex;flex-direction:column;align-items:center;gap:6.5px;color:#2b2620;width:100%}
.cmp-site .cmp-logo{display:flex;align-items:center;justify-content:center;height:44px;width:100%;overflow:hidden} /* was 40px with the image pinned to 28px (owner 2026-10-04 "in that header it is still very small") */
.cmp-site .cmp-logo img{display:block;max-width:100%;max-height:100%;height:100%;width:auto;object-fit:contain}
.cmp-site .cmp-logo.sq{height:58px} /* square-ish logo (ratio under 2, set by the script from the natural size); 72px made the header row too high (owner 2026-10-04 NZ dating-sites) */
/* the header row sticks while the table scrolls past (owner 2026-10-04 "first row with service name should be fixed").
Sticky needs the wrap not to be a scroll container, so when the table fits (script: scrollWidth <= clientWidth)
the wrap is overflow:clip instead of auto; with horizontal scrolling (3 to 4 sites on a phone) it cannot stick. */
.cmp-wrap.fit{overflow:clip}
.cmp-wrap.fit .cmp-r.head{position:sticky;top:var(--cmp-top,0px);z-index:3}
.cmp-site .cmp-name{font:800 16px 'Libre Franklin',sans-serif;text-align:center}
.cmp-site .cmp-score{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6.5px}
.cmp-site .cmp-score b{font:800 20px/1 'Libre Franklin',sans-serif;color:#2b2620}
.cmp-site .cmp-score i{font:600 15px 'Caveat',cursive;color:#a33d2e;font-style:normal;flex-basis:100%;text-align:center} /* the score word always on its own line under the stars (owner 2026-10-21 screenshot: Tinder's "Sehr gut" sat beside them) */
.cmp-site .stars{--sz:13px}
.cmp-cell{padding:13px;font:400 13.5px/1.5 'Libre Franklin',sans-serif;color:#443d34;display:flex;flex-direction:column;gap:4.5px}
.cmp-cell.what{font-size:13.5px;line-height:1.5;color:#2b2620}
.cmp-cell .b{display:flex;gap:6.5px}
.cmp-cell .b a{color:#a33d2e;text-decoration:underline;text-underline-offset:2px}
.cmp-cell .cmp-plan{font:700 13.5px 'Libre Franklin',sans-serif;color:#a33d2e}
.cmp-cell .price{color:#2b2620;font-weight:600}
.cmp-foot{padding:13px;display:flex;flex-direction:column;gap:2px}
.cmp-foot .btn-go{font-size:14.5px;padding:0 8.5px}
.cmp-foot .btn-go.named{white-space:normal} /* "Visit Zooook.org" may wrap */
.cmp-foot .lnk{display:flex;align-items:center;justify-content:center;min-height:32px;text-align:center;text-decoration-thickness:1px}
.cmp-swipe{margin:8px 2px 0;font:500 13px 'Libre Franklin',sans-serif;color:#6d6455}
@media(max-width:639px){
.cmp-lbl{grid-column:1/-1;padding:9px 13px;font-size:13.5px;letter-spacing:.02em;border-bottom:1px solid #d8cdb6}
.cmp-r>.cmp-lbl+div{border-left:0}
}