
.product-illustration{--pi-bg:#f5f4ef;--pi-card:#fff;--pi-ink:#223a34;--pi-line:#deded5;background:var(--pi-bg);color:var(--pi-ink);border:1px solid var(--pi-line);border-radius:14px;overflow:auto;box-shadow:0 18px 48px #00000012;font:10px/1.5 system-ui,sans-serif;text-align:left;width:100%}.product-illustration *{box-sizing:border-box}.pi-address{padding:9px 14px;background:#e7e9e3;color:#69776f;font-size:9px}.pi-address span{margin-left:20px}.pi-top{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;border-bottom:1px solid var(--pi-line);min-width:650px}.pi-logos img{width:100px;height:auto}.pi-dark-logo{display:none}.pi-shell{display:grid;grid-template-columns:140px minmax(0,1fr);min-width:650px}.pi-shell aside{padding:16px 8px;border-right:1px solid var(--pi-line);background:var(--pi-card)}.pi-shell aside>b,.pi-shell aside>small{display:block;margin:0 5px 12px}.pi-nav-item{padding:6px;border-radius:5px;font-size:9px;margin:1px 0}.pi-selected{background:#2f6b5719;color:#2f6b57;font-weight:700}.pi-main{padding:16px;min-width:0}.pi-pagehead h3{font-size:18px;margin:0!important;color:var(--pi-ink)!important}.pi-pagehead{margin-bottom:14px}.pi-pagehead span,.pi-card p,.pi-card small{color:var(--pi-ink);opacity:.75}.pi-card{padding:12px;border:1px solid var(--pi-line);background:var(--pi-card);border-radius:9px;margin-bottom:10px;min-width:0}.pi-card h4{font-size:11px;margin:0 0 6px!important;color:var(--pi-ink)!important}.pi-card p{font-size:9px!important;line-height:1.5!important;margin:5px 0 10px!important}.pi-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.pi-metrics>div{border:1px solid var(--pi-line);border-radius:7px;padding:9px;background:var(--pi-card)}.pi-metrics small,.pi-metrics strong{display:block}.pi-metrics strong{font-size:20px;color:#2f6b57}.pi-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pi-status{color:#99601f;background:#bd822518;border-radius:5px;padding:4px 7px;font-size:9px}.pi-bar-row{display:grid;grid-template-columns:110px 1fr 26px;gap:7px;align-items:center;margin:9px 0;font-size:9px}.pi-bar-row>div{background:#2f6b5712;height:9px;border-radius:9px;overflow:hidden}.pi-bar-row i{display:block;height:100%;background:#2f6b57;border-radius:9px}.pi-target{display:flex;gap:14px;align-items:center}.pi-ring{border:9px solid #2f6b57;border-radius:50%;width:78px;height:78px;display:flex;flex-direction:column;align-items:center;justify-content:center}.pi-ring b{font-size:18px}.pi-ring small{font-size:8px}.product-illustration table{width:100%;border-collapse:collapse;font-size:8px}.product-illustration th,.product-illustration td{padding:6px 3px;border-bottom:1px solid var(--pi-line);text-align:left;vertical-align:top;overflow-wrap:anywhere}.product-illustration th{font-weight:600;color:var(--pi-ink)}.pi-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:9px 0}.pi-fields>div{border:1px solid var(--pi-line);padding:7px;border-radius:5px;overflow-wrap:anywhere;font-size:9px}.pi-fields small{display:block;font-size:8px}.pi-button{display:inline-block;background:#2f6b57;color:#fff;border-radius:5px;padding:6px 8px;font-size:8px;margin:4px 0}.pi-button.secondary{background:transparent;border:1px solid var(--pi-line);color:var(--pi-ink)}.pi-material{padding:12px 7px;border:1px solid var(--pi-line);margin:7px 0;font-size:8px}.pi-card>small{display:block;margin-top:12px}.pi-card ol{padding-left:16px;font-size:9px}.pi-footer{display:flex;justify-content:space-between;font-size:9px;padding:12px 0 0}.pi-caption{padding:9px 14px;border-top:1px solid var(--pi-line);font-size:9px;opacity:.75;min-width:650px}.msp-product-showcase{margin-top:24px}.current-admin.product-illustration{min-width:0}.current-vendor.product-illustration{min-width:0}
html[data-site-theme="dark"] .product-illustration,body.dark .product-illustration{--pi-bg:#14211d;--pi-card:#1d2c26;--pi-ink:#e5ece6;--pi-line:#35473e}html[data-site-theme="dark"] .pi-address,body.dark .pi-address{background:#1d2c26}html[data-site-theme="dark"] .pi-light-logo,body.dark .pi-light-logo{display:none}html[data-site-theme="dark"] .pi-dark-logo,body.dark .pi-dark-logo{display:inline}html[data-site-theme="dark"] .pi-selected{color:#94c8a7;background:#94c8a719}
