/* Accepted circular thumbnails on the existing DNA quick directory. */
body[data-state=home] .dna-directory{background:transparent;isolation:isolate}
.dna-directory:before{content:'';position:absolute;inset:-30px -35px -28px -38px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 40% 48%,#f6f5eff2 25%,#f6f5efb8 58%,#f6f5ef00 78%);filter:blur(18px)}
.directory-products button{grid-template-columns:44px minmax(0,1fr) 18px;gap:12px;align-items:center;padding:11px 2px;background:transparent}
.directory-products button:hover{background:linear-gradient(90deg,#dce8da44,transparent)}
.directory-products .directory-thumb{grid-column:1;grid-row:1;width:42px;height:42px;border-radius:50%;border:1px solid #a9c0ad99;overflow:hidden;display:grid;place-items:center;font-size:8px;color:#809584;background:#f2f4eb66}
.directory-thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.directory-thumb.is-structure img{width:90%;height:80%}
.directory-products .directory-copy{grid-column:2;grid-row:1;min-width:0;display:block}
.directory-copy strong,.directory-copy small{display:block;overflow-wrap:anywhere}
.directory-copy small{margin-top:6px}
.directory-products .directory-arrow{grid-column:3;grid-row:1}

/* Bring both product portraits into the first desktop viewport. */
@media(min-width:651px){
 body[data-state=product] .wayfinding{height:50px}
 body[data-variant=a][data-state=product] .reading-layout{padding-top:6px}
 body[data-state=product] .product-categorybar{margin-bottom:12px;padding-bottom:8px}
 body[data-state=product] .product-category-tabs button{min-height:32px;padding:6px 12px}
 body[data-state=product] .product-top{padding-bottom:10px}
 body[data-state=product] .product-tabs{padding:8px 1px 4px}
 body[data-state=product] #chapter-overview{padding-top:14px;min-height:0;padding-bottom:30px}
 body[data-state=product] #chapter-overview .chapter-heading{margin-bottom:14px}
 body[data-state=product] .product-heading{margin-top:0}
 body[data-state=product] .product-en{margin-bottom:5px}
 body[data-state=product] .product h2#productTitle{font-size:clamp(29px,2.9vw,42px);line-height:1.25}
 body[data-state=product] .product-number{font-size:36px}
 body[data-state=product] #productTags{margin-top:12px;gap:6px}
 body[data-state=product] .product-intro{margin:10px 0;line-height:1.7;max-width:100%}
 body[data-state=product] .product-actions{margin:12px 0 16px;gap:20px}
 body[data-state=product] .product-actions button{padding-top:10px;padding-bottom:10px}
 body[data-variant=a][data-state=product] .product-visuals figure>div,
 body[data-variant=a][data-state=product] #moleculeImage{height:clamp(170px,calc(100svh - 610px),240px)!important}
 body[data-variant=a][data-state=product] #molecularCanvas{height:100%;top:0}
 body[data-variant=a][data-state=product] #stageFallback{height:90%;top:5%}
 body[data-state=product] .powder img{max-height:100%;object-fit:contain;padding:10px}
 body[data-variant=a][data-state=product] .powder-sprite{width:clamp(170px,calc(100svh - 610px),240px);height:100%;background-size:300% 100%}
}
@media(max-width:650px){
 .directory-products button{grid-template-columns:34px minmax(0,1fr) 16px;padding:8px 2px;gap:9px}
 .directory-products .directory-thumb{width:32px;height:32px;font-size:7px}
 .directory-copy small{margin-top:4px}
 .dna-directory:before{inset:-18px -20px;filter:blur(12px);background:radial-gradient(ellipse,#f6f5effa 40%,#f6f5efce 65%,transparent 95%)}
}