body.mc-native .cr-families-heading { width: var(--mc-home-width); margin: 0 auto 28px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 40px; }
body.mc-native .cr-families-heading h2 { margin: 0; font-family: Montserrat, Arial, sans-serif; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: uppercase; }
body.mc-native .cr-families-heading p { margin: 0; text-align: right; }
@media (max-width: 767px) {
    body.mc-native .cr-families-heading { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
    body.mc-native .cr-families-heading p { text-align: left; }
}
body.mc-native .cr-families { width: var(--mc-home-width); margin: 20px auto 64px; color: #1c1c1c; font-family: Montserrat, Arial, sans-serif; }
.cr-families__toolbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; border-top: 1px solid #ddd; padding: 12px 0; }
.cr-families__count { font-size: 12px; font-weight: 400; color: #6f6f6f; margin-right: 16px; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
body.mc-native .cr-families__toolbar button { display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #1c1c1c; cursor: pointer; }
.cr-families__toolbar svg { width: 22px; height: 22px; }
body.mc-native .cr-families__toolbar button:hover { background: #f6f6f6; color: #1c1c1c; }
body.mc-native .cr-families__toolbar button:disabled { opacity: .3; cursor: default; background: transparent; }
body.mc-native .cr-families__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 5); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: #b8b8b8 #f6f6f6; margin: 0; padding: 0 0 16px; list-style: none; }
body.mc-native .cr-families__item { min-width: 0; padding: 0; margin: 0; list-style: none; scroll-snap-align: start; }
body.mc-native .cr-families__link { display: block; height: 100%; color: #1c1c1c; text-decoration: none; border-bottom: 1px solid #ddd; padding-bottom: 16px; transition: border-color 450ms ease; }
.cr-families__media { display: block; aspect-ratio: 1; background: #f3f3f3; }
body.mc-native .cr-families__media img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 0; filter: none; opacity: 1; transform: scale(1); transition: transform 650ms cubic-bezier(.2,.65,.3,1), filter 450ms ease; }
body.mc-native.mc-home .cr-families__media img { filter: saturate(.65); }
body.mc-native.mc-home .cr-families__link:focus-visible .cr-families__media img { filter: saturate(1); }
body.mc-native .cr-families h3 { font: 500 15px/1.4 Montserrat, Arial, sans-serif; color: #1c1c1c; letter-spacing: 0; text-transform: none; margin: 16px 0 8px; min-height: 42px; overflow-wrap: anywhere; }
body.mc-native .cr-families p { font: 300 13px/1.5 Montserrat, Arial, sans-serif; color: #6f6f6f; letter-spacing: 0; text-transform: none; margin: 0; min-height: 58.5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cr-families__link:hover h3 { text-decoration: underline; text-underline-offset: 4px; }
body.mc-native .cr-families__link:focus-visible { border-bottom-color: #1c1c1c; }
@media (hover: hover) and (pointer: fine) {
    body.mc-native .cr-families__link:hover { border-bottom-color: #1c1c1c; }
    body.mc-native .cr-families__link:hover .cr-families__media img { transform: scale(.965); }
    body.mc-native.mc-home .cr-families__link:hover .cr-families__media img { filter: saturate(1); }
}
@media (prefers-reduced-motion: reduce) {
    body.mc-native .cr-families__link, body.mc-native .cr-families__media img { transition: none; }
    body.mc-native .cr-families__link:hover .cr-families__media img { transform: none; }
}
.cr-families :is(a,button,ul):focus-visible { outline: 2px solid #1c1c1c; outline-offset: -2px; }
@media (max-width: 1199px) { body.mc-native .cr-families__track { grid-auto-columns: calc((100% - 32px) / 3); } }
@media (max-width: 767px) {
    body.mc-native .cr-families { margin: 16px auto 40px; }
    body.mc-native .cr-families__track { grid-auto-columns: calc((100% - 16px) / 2); }
}
@media (max-width: 480px) { body.mc-native .cr-families__track { grid-auto-columns: 78%; gap: 12px; } }