/* Optional graphic composition. Decorations must carry aria-hidden="true". */
.shared-ui :where(.su-architectural) { position: relative; isolation: isolate; min-width: 0; }
.shared-ui :where(.su-decoration) { position:absolute; pointer-events:none; user-select:none; overflow:hidden; z-index:-1; }
.shared-ui :where(.su-decoration img) { display:block; width:100%; height:100%; object-fit:cover; }
.shared-ui :where(.su-corner-art) { right:0; top:0; width:min(38%,200px); height:140px; max-height:100%; clip-path:polygon(25% 0,100% 0,100% 100%); opacity:.18; }
.shared-ui :where(.su-edge-art) { inset:0 auto 0 0; width:7px; background:var(--su-accent); }
.shared-ui :where(.su-surface-art) { inset:0 0 0 auto; width:48%; opacity:.09; mask-image:linear-gradient(90deg,transparent,#000); }
.shared-ui :where(.su-accent-texture) { position:relative; isolation:isolate; background:var(--su-accent); color:var(--su-on-accent); }
.shared-ui :where(.su-accent-texture .su-decoration) { inset:0; opacity:.12; }
.shared-ui :where(.su-trace) { display:block; color:var(--su-muted); font:500 .625rem/1.5 var(--su-font-label); overflow-wrap:anywhere; pointer-events:none; }
.shared-ui :where(.su-art .su-trace) { position:absolute; top:38px; left:14px; right:14px; opacity:.5; color:#fff; text-shadow:0 1px 2px #000; }
.shared-ui :where(.su-tag) { display:inline-block; line-height:0; background:#fff; flex:none; width:50px; height:50px; }
.shared-ui :where(.su-tag svg) { display:block; width:50px; height:50px; opacity:1; filter:none; }
.shared-ui :where(.su-art .su-tag) { position:absolute; right:12px; top:12px; }
.shared-ui :where(.su-print-grain)::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.16; background-image:radial-gradient(#000 1px,transparent 1px); background-size:3px 3px; }
@media(max-width:1024px) { .shared-ui :where(.su-corner-art) { width:120px; height:100px; } }
@media(max-width:759px) {
  .shared-ui :where(.su-surface-art,.su-secondary-art) { display:none; }
  .shared-ui :where(.su-corner-art) { width:52px; height:52px; }
  .shared-ui :where(.su-edge-art) { width:4px; }
  .shared-ui :where(.su-art .su-trace) { display:none; }
}
@media print, (forced-colors:active) {
  .shared-ui :where(.su-decoration,.su-trace,.su-tag) { display:none; }
}
.shared-ui :where(.su-id-panel) { position: relative; min-width: 0; isolation: isolate; }
.shared-ui :where(.su-calibration) { display: flex; width: 84px; height: 8px; pointer-events: none; }
.shared-ui :where(.su-calibration > i) { flex: 1; background: var(--su-accent); }
.shared-ui :where(.su-calibration > i:nth-child(2)) { background: var(--su-secondary); }
.shared-ui :where(.su-calibration > i:nth-child(3)) { background: var(--su-tertiary); }
.shared-ui :where(.su-registration) { width: 22px; height: 22px; position: absolute; inset: 12px 12px auto auto; color: var(--su-muted); pointer-events: none; }
.shared-ui :where(.su-registration)::before { content: ""; position: absolute; width: 22px; height: 1px; top: 10px; background: currentColor; }
.shared-ui :where(.su-registration)::after { content: ""; position: absolute; width: 1px; height: 22px; left: 10px; background: currentColor; }
.shared-ui :where(.su-identifier) {
  display: block; overflow: hidden; pointer-events: none; user-select: none;
  color: var(--su-on-paper); background: var(--su-paper);
  font: 700 5rem/.75 var(--su-font-editorial); letter-spacing: -.08em;
  height: 64px; width: 100px; padding: 14px 8px 0;
}
.shared-ui :where(.su-label-tab) {
  display: inline-block; padding: 8px 12px; color: var(--su-on-accent); background: var(--su-accent);
  font: 700 .6875rem/1.4 var(--su-font-label); letter-spacing: .07em; text-transform: uppercase;
  position: relative; z-index: 1; max-width: 100%; overflow-wrap: anywhere;
}
.shared-ui :where(.su-product-grid) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,220px),1fr)); gap: 12px; }
.shared-ui :where(.su-product-card) { min-width: 0; padding: 20px; background: var(--su-surface); color: var(--su-ink); }
.shared-ui :where(.su-art) { position: relative; margin: 0; overflow: hidden; background: var(--su-field); min-width: 0; }
.shared-ui :where(.su-art img) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.shared-ui :where(.su-art .su-label-tab) { position: absolute; bottom: 16px; left: 0; }
.shared-ui :where(.su-art .su-identifier) { position: absolute; bottom: 0; right: 0; }
.shared-ui :where(.su-art .su-calibration) { position: absolute; top: 14px; left: 14px; }
.shared-ui :where([data-su-expression="expressive"] .su-identifier),
.shared-ui[data-su-expression="expressive"] :where(.su-identifier) {
  width: 160px; height: 96px; font-size: 8rem; padding-top: 22px;
  background: var(--su-secondary); color: #101518;
}
.shared-ui :where([data-su-expression="expressive"] .su-label-tab),
.shared-ui[data-su-expression="expressive"] :where(.su-label-tab) { transform: translateY(6px); }
.shared-ui :where([data-su-expression="expressive"] .su-product-card),
.shared-ui[data-su-expression="expressive"] :where(.su-product-card) { border-top: 6px solid var(--su-secondary); }
.shared-ui :where([data-su-expression="expressive"] .su-calibration),
.shared-ui[data-su-expression="expressive"] :where(.su-calibration) { width: 120px; height: 12px; }
@media (max-width: 760px) {
  .shared-ui :where(.su-art .su-registration) { display: none; }
  .shared-ui :where([data-su-expression="expressive"] .su-identifier),
  .shared-ui[data-su-expression="expressive"] :where(.su-identifier) { width: 112px; height: 72px; font-size: 6rem; }
}
@media print {
  .shared-ui :where(.su-art, .su-identifier, .su-calibration, .su-registration, .su-label-tab) { display: none; }
  .shared-ui :where(.su-product-card) { border: 1px solid #999; background: #fff; color: #111; }
}
@media (forced-colors: active) {
  .shared-ui :where(.su-calibration, .su-registration, .su-identifier) { display: none; }
  .shared-ui :where(.su-product-card) { outline: 1px solid CanvasText; }
}