/* VOBOM product-family directory: light palette and responsive navigation. */
.vobom-family-directory { margin: 48px 0 28px; padding: clamp(20px, 4vw, 36px); background: #F8F6F0; border: 1px solid #D4AF37; border-radius: 10px; color: #333333; }
.vobom-family-directory__eyebrow { margin: 0 0 8px; color: #7a5b16; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vobom-family-directory h2 { margin: 0 0 12px; color: #333333; line-height: 1.2; }
.vobom-family-directory__intro { max-width: 76ch; line-height: 1.65; }
.vobom-family-directory__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.vobom-family-directory__grid li { min-width: 0; }
.vobom-family-directory__grid a { display: flex; min-height: 58px; align-items: center; padding: 14px 16px; border: 1px solid #d9d3c4; border-radius: 6px; background: #ffffff; color: #333333; font-weight: 700; line-height: 1.35; text-decoration: none; }
.vobom-family-directory__grid a:hover, .vobom-family-directory__grid a:focus-visible { border-color: #F27C22; color: #8b3c00; outline: 2px solid #F27C22; outline-offset: 2px; }
.vobom-family-directory__note { margin: 20px 0 0; padding: 14px 16px; border-left: 3px solid #D4AF37; background: #ffffff; line-height: 1.6; }
body.vobom-family-reference .fields { display: none !important; }
body.vobom-family-reference .cta { background: #F27C22 !important; border-color: #F27C22 !important; color: #ffffff !important; }
@media (max-width: 760px) { .vobom-family-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vobom-family-directory__grid a { padding: 12px; } }
@media (max-width: 480px) { .vobom-family-directory__grid { grid-template-columns: 1fr; } }