/* S28: common customer detail, catalog scope and availability; screen only. */
@media screen {
 body .catalog-sources{display:flex;align-items:center;gap:10px;margin:8px 0;min-width:0;font-size:13px}
 body .catalog-sources label{flex:none;margin:0;color:var(--skin-muted)}
 body .catalog-sources select{width:min(440px,100%);min-width:0;height:38px;padding:0 36px 0 12px;color:var(--skin-ink);background-color:var(--skin-paper);border:1px solid var(--skin-line)}
 body .catalog-sources a{flex:none;text-decoration:underline;text-underline-offset:3px;font-size:12px}
 body.customer-interface.kg-catalog .bean-row .catalog-availability{display:grid;gap:3px;min-width:0;grid-column:2;grid-row:2 / span 2}
 body.customer-interface.kg-catalog .catalog-availability .available-total{display:flex;align-items:baseline;gap:8px;line-height:1.45}
 .catalog-availability .available-total>span,.catalog-availability .available-boxes{font-size:12px;color:var(--skin-muted)}
 .catalog-availability .available-total strong{color:var(--skin-ink);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
 .catalog-availability .available-total small{font-size:12px;font-weight:400}
 .catalog-availability .available-boxes{display:flex;align-items:baseline;gap:8px;line-height:1.45}
 .catalog-availability .available-boxes>span:first-child{flex:none}
 .catalog-availability .available-boxes>span:last-child{min-width:0;overflow-wrap:anywhere}
 .catalog-availability .available-box-weight{white-space:nowrap}
 body .catalog-detail-dialog{width:min(720px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 48px);padding:0;margin:auto;border:1px solid var(--skin-line);border-radius:12px;background:var(--skin-paper);color:var(--skin-ink);box-shadow:0 20px 70px #0003;overflow:hidden;font:14px/1.6 LunoirSans,"Microsoft YaHei UI",sans-serif}
 body .catalog-detail-dialog[open]{display:flex;flex-direction:column;animation:catalog-detail-enter 180ms ease-out}
 .catalog-detail-dialog::backdrop{background:#14181466}
 body .catalog-detail-dialog>header{display:flex;align-items:flex-start;gap:16px;padding:20px 24px;background:var(--skin-soft);border-bottom:1px solid var(--skin-line);height:auto;flex:none}
 body .catalog-detail-dialog h2{margin:0;flex:1;min-width:0;font:600 20px/1.5 LunoirSans,"Microsoft YaHei UI",sans-serif;overflow-wrap:anywhere;color:var(--skin-ink)}
 body .catalog-detail-dialog .catalog-detail-close{flex:none;padding:8px 14px;min-height:40px;border:1px solid var(--skin-line);border-radius:5px;background:var(--skin-paper);color:var(--skin-ink);font:inherit;cursor:pointer}
 body .catalog-detail-dialog .catalog-detail-close:hover{background:var(--skin-hover)}
 body .catalog-detail-dialog .catalog-detail-close:focus-visible{outline:2px solid var(--skin-accent);outline-offset:2px}
 body .catalog-detail-content{padding:20px 24px;overflow:auto;overscroll-behavior:contain;min-height:0}
 body .catalog-detail-content .kg-details{margin:0;padding:0;border:0;color:var(--skin-ink);font:inherit;background:transparent}
 body .catalog-detail-content .bean-information{gap:12px 24px;font-size:14px}
 body .catalog-detail-content .bean-information dt{color:var(--skin-muted)}
 body .catalog-detail-content .bean-information dd{color:var(--skin-ink)}
 body .catalog-detail-content .bean-detail-flavor{grid-column:1/-1}
 body .catalog-detail-content .public-tasting{margin-top:20px;padding-top:16px;border-top:1px solid var(--skin-line)}
 body .catalog-detail-content .public-tasting h3{font-size:15px;margin:0 0 8px;color:var(--skin-ink)}
 @keyframes catalog-detail-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}
@media screen and (min-width:741px){body.customer-interface.kg-catalog .bean-row .catalog-availability{grid-column:auto;grid-row:auto}}
@media screen and (max-width:740px){
 body .catalog-sources{gap:8px;flex-wrap:wrap}
 body .catalog-sources select{flex:1;width:0}
 body .catalog-sources a{margin-left:auto}
 body .catalog-detail-dialog>header{padding:16px;gap:10px}
 body .catalog-detail-dialog h2{font-size:17px}
 body .catalog-detail-content{padding:16px}
 .catalog-availability .available-total strong{font-size:14px}
}
@media (prefers-reduced-motion:reduce){body .catalog-detail-dialog[open]{animation:none}}
