/* App category artwork, labels, counts and gradient colours. */
.fabric-family-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:64px 22px;padding:50px 10px 10px;max-width:520px;margin:auto;text-align:left;font-family:system-ui,sans-serif}
.fabric-family{position:relative;height:190px;border-radius:18px;border:1px solid #2d1e232e;box-shadow:0 4px 7px #3e2d242e;color:#fff8ed;background:linear-gradient(135deg,#7a2d1d,#aa4527 55%,#d06a32);isolation:isolate}
.fabric-family:before{content:"";position:absolute;inset:0;border-radius:inherit;background:#00000059;z-index:-1}
.fabric-family.animal{background:linear-gradient(135deg,#8e4ec6,#a855a0 55%,#c05c7e)}
.fabric-family.synthetic{background:linear-gradient(135deg,#27418f,#3a6fb5 55%,#4a86be)}
.fabric-family.specialty{background:linear-gradient(135deg,#1d9e75,#57b47e 55%,#97c459)}
.fabric-family-grid .fabric-family img{position:absolute;top:-46px;right:-10px;width:126px;height:115px;object-fit:contain;border:0;border-radius:0;max-height:none;padding:0;filter:drop-shadow(0 5px 6px #2d1e2047)}
.fabric-family-grid .plant img{width:138px;height:92px}
.fabric-family-grid .specialty img{width:120px;height:120px}
.fabric-family strong{position:absolute;left:11px;right:8px;bottom:54px;font-size:16px;line-height:19px;font-weight:900}
.fabric-family span{position:absolute;left:10px;bottom:10px;padding:6px 10px;border-radius:14px;background:#2d273057;font-size:13px;line-height:16px;font-weight:900}
.hero-library-shot .category-preview{display:block;text-decoration:none;color:inherit;cursor:zoom-in}
@media(max-width:380px){.fabric-family-grid{gap:60px 16px}.fabric-family strong{font-size:15px}.fabric-family-grid .fabric-family img{right:-5px}}

/* Each family opens its own app-derived, scrollable group menu. */
.fabric-family-grid>a.fabric-family{display:block;text-decoration:none;cursor:pointer}.fabric-family-grid>a.fabric-family:focus-visible{outline:3px solid #e6a23c;outline-offset:5px}