/* Corners are presentation, independent of uploaded icon geometry. */
.na-framed-icon { --icon-corner:#aaa; position:relative; display:inline-grid; place-items:center; flex:0 0 36px; width:36px; height:36px; color:inherit; }
.na-framed-icon::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(var(--icon-corner),var(--icon-corner)) left top/6px 1px no-repeat,linear-gradient(var(--icon-corner),var(--icon-corner)) left top/1px 6px no-repeat,linear-gradient(var(--icon-corner),var(--icon-corner)) right top/6px 1px no-repeat,linear-gradient(var(--icon-corner),var(--icon-corner)) right top/1px 6px no-repeat,linear-gradient(var(--icon-corner),var(--icon-corner)) left bottom/6px 1px no-repeat,linear-gradient(var(--icon-corner),var(--icon-corner)) left bottom/1px 6px no-repeat,linear-gradient(var(--icon-corner),var(--icon-corner)) right bottom/6px 1px no-repeat,linear-gradient(var(--icon-corner),var(--icon-corner)) right bottom/1px 6px no-repeat; }
.na-framed-icon :is(svg,img,.c-icon__asset) { display:block; width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; }
.na-product-story .na-product-story__icon { border:0; background:none; color:#fff; }
.na-product-story__icon > .na-framed-icon { width:36px; height:36px; }
.na-product-story__icon .na-framed-icon svg { width:100%; height:100%; }