.crm-related{padding-top:32px}
.crm-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.crm-related-card{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;min-width:0;padding:20px;border:1px solid color-mix(in srgb,var(--related-color) 35%,white);border-top:4px solid color-mix(in srgb,var(--related-color) 35%,white);border-radius:16px;background:color-mix(in srgb,var(--related-color) 12%,white);transition:background .18s,transform .18s}
.crm-related-card:hover{background:color-mix(in srgb,var(--related-color) 18%,white);transform:translateY(-2px)}
.crm-related-title{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:17px;line-height:1.3}
.crm-related-title::after{content:"";position:absolute;inset:0;z-index:0;border-radius:16px}
.crm-related-title strong{min-width:0;overflow-wrap:anywhere}
.crm-related-mark{display:grid;place-items:center;flex:0 0 36px;height:36px;border-radius:10px;background:var(--related-color);color:white;font-size:15px;font-weight:700}
.crm-related-directions{font-size:12px;line-height:1.6;color:var(--muted)}
.crm-related-bottom{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 12px;margin-top:auto;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--related-color) 35%,white)}
.crm-related-compare{position:relative;z-index:1;flex-shrink:0;min-width:0;margin-left:auto;white-space:nowrap;color:var(--blue);font-size:12px;font-weight:600;line-height:1.5}
.crm-related-compare:hover,.crm-related-compare:focus-visible{text-decoration:underline;text-underline-offset:3px}
.crm-related-price{flex:0 0 auto;max-width:100%;text-align:left;font-size:13px;font-weight:700;line-height:1.5;color:var(--ink)}
.crm-related-title:focus-visible{outline:none}
.crm-related-title:focus-visible::after,.crm-related-compare:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.crm-replace-dialog{width:min(440px,calc(100vw - 32px));padding:24px;border:1px solid #c9dedf;border-radius:16px;color:var(--ink);background:#fff;box-shadow:0 24px 80px #12343b35}
.crm-replace-dialog::backdrop{background:#12343b70;backdrop-filter:blur(3px)}
html:has(.crm-replace-dialog[open]){overflow:hidden}
.crm-replace-dialog h2{margin:0 0 12px;font-size:22px;line-height:1.3}
.crm-replace-dialog p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.crm-replace-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.crm-replace-actions .button{min-width:80px;cursor:pointer}
@media(max-width:1000px){.crm-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.crm-related-grid{grid-template-columns:1fr;gap:10px}.crm-related-card{border-radius:0;padding:16px 10px}.crm-related-title::after{border-radius:0}.crm-related-card:hover{transform:none}.crm-related .crm-section-heading{padding-inline:10px}}