.cmp-view{display:none}.cmp-view [hidden]{display:none!important}.star-detail-modal.cmp-on .star-detail-inner,.terrazzo-detail-modal.cmp-on .terrazzo-detail-inner,.star-detail-modal.cmp-on .star-detail-next,.terrazzo-detail-modal.cmp-on .terrazzo-detail-next{display:none}.cmp-on .cmp-view{display:block}.cmp-step{display:flex;flex-direction:column;gap:25px}.cmp-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-right:40px}.cmp-title{font-size:20px;font-weight:600;color:#333;margin:0}.cmp-scale{display:inline-flex;gap:2px;padding:3px;border:1px solid #ddd;border-radius:30px}.cmp-scale button{font-family:inherit;font-size:12px;font-style:italic;padding:6px 14px;border:0;border-radius:30px;background:0 0;color:#888;cursor:pointer;transition:.3s}.cmp-scale button:hover{color:#000}.cmp-scale button.is-on{background:#000;color:#fff}.cmp-sides{display:grid;grid-template-columns:1fr 1fr;gap:6px}.cmp-side{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}.cmp-side img{display:block;width:100%;aspect-ratio:1;max-height:52vh;object-fit:cover;background:#f4f4f4;cursor:pointer;transition:opacity .3s}.cmp-side img:hover{opacity:.9}.cmp-side figcaption{display:flex;align-items:baseline;gap:14px}.cmp-side+.cmp-side figcaption{flex-direction:row-reverse}.cmp-ref{font-size:15px;font-weight:600;color:#333}.cmp-change{font-family:inherit;font-size:12px;font-style:italic;color:#888;background:0 0;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;transition:color .3s}.cmp-change:hover{color:#000}.star-btn.cmp-btn,.terrazzo-btn.cmp-btn{font-family:inherit;line-height:inherit;background:#fff;color:#000;border:0;box-shadow:inset 0 0 0 1.5px #000;display:inline-flex;align-items:center;justify-content:center;gap:8px}.star-btn.cmp-btn:hover,.terrazzo-btn.cmp-btn:hover{background:#f0f0f0}.cmp-btn svg{flex:none}.cmp-filter{font-family:inherit;font-size:13px;width:min(100%,300px);padding:10px 18px;border:1px solid #ddd;border-radius:30px;outline:0;box-sizing:border-box;transition:border-color .3s}.cmp-filter:focus{border-color:#000}.cmp-groups{display:flex;flex-direction:column;gap:24px}.cmp-group-title{font-size:13px;font-weight:400;text-transform:uppercase;letter-spacing:1px;color:#000;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid #000}.cmp-group-title strong{font-weight:700}.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:12px 10px}.cmp-item{font-family:inherit;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:0 0;cursor:pointer;text-align:center;color:#333}.cmp-item img{display:block;width:100%;aspect-ratio:1;object-fit:cover;outline:2px solid transparent;outline-offset:2px;transition:opacity .3s,outline-color .3s}.cmp-item:hover img{opacity:.85}.cmp-item span{font-size:11px}.cmp-item.is-on img{outline-color:#000}.cmp-item:disabled{cursor:default;opacity:.3}.cmp-item:disabled:hover img{opacity:1}.cmp-empty{font-size:13px;font-style:italic;color:#888;margin:0}@media (max-width:768px){.cmp-head{padding-right:36px}.cmp-title{font-size:18px}.cmp-grid{grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px 8px}.cmp-ref{font-size:13px}.cmp-side figcaption{flex-direction:column;gap:4px}.cmp-side+.cmp-side figcaption{flex-direction:column;align-items:flex-end}}