/* A calm family gallery between a division and its individual products. */
.family-browser{position:fixed;inset:0;width:min(1200px,94vw);height:min(940px,91dvh);max-width:none;max-height:none;margin:auto;padding:0;border:0;border-radius:2px;overflow:hidden;background:#fafbfc;color:var(--ink,#18304a);box-shadow:0 30px 120px #081b3355;--family-browser-accent:#285861}
.family-browser::backdrop{background:#0a1d3373;backdrop-filter:blur(5px)}
.family-browser-shell{height:100%;display:flex;flex-direction:column;min-width:0}
.family-browser-header{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-shrink:0;padding:20px 38px;border-bottom:1px solid var(--line,#24476824)}
.family-browser-division{margin:0 0 7px;color:var(--family-browser-accent);font:600 10px/1.5 Manrope,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.family-browser-header h2{margin:0;font:600 clamp(30px,3.4vw,44px)/1.06 Barlow,Arial,sans-serif;letter-spacing:-.015em;text-transform:uppercase;overflow-wrap:anywhere}
.family-browser-close{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #829bad66;border-radius:50%;padding:0;background:transparent;color:var(--ink,#18304a);font:400 26px/1 Manrope,Arial,sans-serif;cursor:pointer;transition:color .2s,background .2s}
.family-browser-close:hover{background:var(--ink,#18304a);color:white}
.family-browser-body{padding:26px 38px 48px;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0}
.family-browser-tools{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:end}
.family-browser-introduction{display:flex;justify-content:space-between;gap:40px;align-items:flex-start;margin:0;min-width:0}
.family-browser-introduction p{max-width:660px;margin:0;font:400 13px/1.9 Manrope,Arial,sans-serif;color:var(--muted,#5f7386)}
.family-browser-introduction>span{flex-shrink:0;padding-top:4px;color:var(--family-browser-accent);font:600 10px/1.7 Manrope,Arial,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.family-browser-search{max-width:none;margin:0;min-width:0}
.family-browser-search label{display:block;margin-bottom:3px;color:var(--ink,#18304a);font:600 10px/1.7 Manrope,Arial,sans-serif}
.family-browser-search-field{display:flex;align-items:center;gap:14px;border-bottom:1px solid #9eafbd}
.family-browser-search input{display:block;width:100%;min-width:0;min-height:44px;border:0;padding:10px 0;background:transparent;color:var(--ink,#18304a);font:400 12px/1.7 Manrope,Arial,sans-serif;border-radius:0;outline-offset:3px}
.family-browser-search input::placeholder{color:#718493}
.family-browser-clear{flex-shrink:0;border:0;padding:10px 0;min-height:44px;background:transparent;color:var(--family-browser-accent);font:600 10px/1.7 Manrope,Arial,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.family-browser-count{margin:20px 0;font:400 10px/1.7 Manrope,Arial,sans-serif;color:var(--muted,#5f7386)}
.family-browser-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 26px}
.family-browser-product{display:flex;flex-direction:column;min-width:0;align-self:start;appearance:none;border:0;padding:0;background:transparent;color:var(--ink,#18304a);text-align:left;cursor:pointer;font:inherit;border-radius:0;box-shadow:none}
.family-browser-photo{position:relative;display:block;width:100%;aspect-ratio:1.35;overflow:hidden;background:#f0f3f6;transition:background .25s}
.family-browser-photo img{position:absolute;inset:9%;width:82%;height:82%;object-fit:contain;mix-blend-mode:multiply;transition:transform .5s cubic-bezier(.22,.7,.22,1)}
.family-browser-product-arrow{position:absolute;right:18px;bottom:14px;color:var(--family-browser-accent);font-size:20px;opacity:0;transform:translate(-4px,4px);transition:opacity .25s,transform .25s}
.family-browser-product:hover .family-browser-photo,.family-browser-product:focus-visible .family-browser-photo{background:#e7edf3}
.family-browser-product:hover img,.family-browser-product:focus-visible img{transform:scale(1.035)}
.family-browser-product:hover .family-browser-product-arrow,.family-browser-product:focus-visible .family-browser-product-arrow{opacity:1;transform:none}
.family-browser-product-copy{display:flex;flex-direction:column;gap:8px;padding-top:17px;min-width:0;width:100%}
.family-browser-maker{font:600 9px/1.6 Manrope,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#5f7386);overflow-wrap:anywhere}
.family-browser-product-title{font:600 clamp(27px,2.5vw,34px)/1.08 Barlow,Arial,sans-serif;letter-spacing:-.01em;overflow-wrap:anywhere}
.family-browser-product-label{font:400 11px/1.7 Manrope,Arial,sans-serif;color:var(--muted,#5f7386)}
.family-browser-identity{font:400 9px/1.7 Manrope,Arial,sans-serif;color:#476176;overflow-wrap:anywhere}
.family-browser-identity::before{content:'';display:inline-block;width:4px;height:4px;margin-right:6px;vertical-align:2px;background:currentColor;border-radius:50%}
.family-browser-identity.needs-review{color:#825019}
.family-browser-empty{padding:45px 0 20px;color:var(--muted,#5f7386);font:400 13px/1.8 Manrope,Arial,sans-serif}
.family-browser-empty p{margin:0 0 8px}
.family-browser-empty button{border:0;padding:10px 0;background:transparent;color:var(--family-browser-accent);min-height:44px;font:600 11px/1.7 Manrope,Arial,sans-serif;text-decoration:underline;text-underline-offset:5px;cursor:pointer}
.family-browser button:focus-visible,.family-browser input:focus-visible{outline:2px solid var(--family-browser-accent);outline-offset:5px}
.family-browser [hidden]{display:none!important}
@media(max-width:1000px){.family-browser-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}.family-browser-header{padding:20px 28px}.family-browser-body{padding:26px 28px 40px}.family-browser-tools{grid-template-columns:1fr;gap:18px}.family-browser-photo{aspect-ratio:1.15}}
@media(max-width:600px){
 .family-browser{width:100vw;height:100dvh;border-radius:0}
 .family-browser-header{padding:19px 22px;gap:18px}
 .family-browser-header h2{font-size:33px}.family-browser-division{font-size:9px}
 .family-browser-body{padding:24px 22px 40px}
 .family-browser-introduction{gap:18px;flex-direction:column;margin:0}
 .family-browser-introduction p{font-size:12px}.family-browser-introduction>span{display:none}
 .family-browser-search{max-width:none}.family-browser-count{margin-top:23px}
 .family-browser-grid{grid-template-columns:1fr;gap:36px}
 .family-browser-photo{aspect-ratio:1.15}.family-browser-product-title{font-size:33px}
 .family-browser-product-copy{gap:7px}.family-browser-product-label{font-size:12px}
 .family-browser-maker,.family-browser-identity{font-size:10px}.family-browser-product-arrow{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){.family-browser-photo,.family-browser-photo img,.family-browser-product-arrow,.family-browser-close{transition:none}}
