.szpf-detail { --szpf-tile-width: max(100px, calc(var(--szpf-swatch-size) + 24px), calc(var(--szpf-font-size) * 6 + 24px)); display: block; margin: var(--szpf-margin-top) var(--szpf-margin-right) var(--szpf-margin-bottom) var(--szpf-margin-left); width: auto; max-width: 100%; font-family: inherit; box-sizing: border-box; }
.szpf-detail .szpf-detail-title { display: flex; align-items: center; gap: 16px; margin: 0 0 var(--szpf-title-gap); padding: 0; color: var(--szpf-heading-color); font-size: var(--szpf-heading-size); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.szpf-detail .szpf-detail-title[hidden] { display: none; }
.szpf-detail .szpf-detail-list { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--szpf-gap-y) var(--szpf-gap-x); list-style: none; margin: 0; padding: 0; max-width: 100%; }
.szpf-detail .szpf-detail-item { display: flex; position: relative; flex-direction: column; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: max(var(--szpf-swatch-size), calc(var(--szpf-font-size) * 6)); max-width: 100%; gap: var(--szpf-label-gap); margin: 0; padding: 0; list-style: none; box-sizing: border-box; }
.szpf-detail .szpf-detail-swatch { display: block; flex: 0 0 auto; width: var(--szpf-swatch-size); height: var(--szpf-swatch-size); max-width: 100%; border: 1px solid #b8c2ce; border-radius: 50%; box-sizing: border-box; }
.szpf-detail .szpf-detail-name { font-family: inherit; font-size: var(--szpf-font-size); color: var(--szpf-text-color); line-height: 1.4; font-weight: 400; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
.szpf-detail-chips .szpf-detail-swatch { border: 3px solid #fff; outline: 1px solid #d7dfe6; box-shadow: 0 2px 6px #152d4926; }
.szpf-detail-palette .szpf-detail-title, .szpf-detail-matrix .szpf-detail-title { font-weight: 400; justify-content: center; text-align: center; }
.szpf-detail-palette .szpf-detail-title::before, .szpf-detail-palette .szpf-detail-title::after, .szpf-detail-matrix .szpf-detail-title::before, .szpf-detail-matrix .szpf-detail-title::after { content: ''; flex: 1 1 20px; min-width: 10px; border-top: 1px solid #cad8e7; }
.szpf-detail-squares .szpf-detail-swatch { border-radius: 6px; }
.szpf-detail-matrix .szpf-detail-list { align-items: stretch; width: max-content; max-width: min(100%, calc(var(--szpf-columns) * var(--szpf-tile-width) + (var(--szpf-columns) - 1) * var(--szpf-gap-x))); }
.szpf-detail-matrix .szpf-detail-item { width: var(--szpf-tile-width); border: 1px solid #dce4ed; border-radius: 8px; padding: 10px; background: #fff; }
.szpf-detail-matrix .szpf-detail-swatch { height: calc(var(--szpf-swatch-size) * .68); border-radius: 4px; }
.szpf-detail-align-left .szpf-detail-list { justify-content: flex-start; margin-left: 0; margin-right: auto; }
.szpf-detail-align-center .szpf-detail-list { justify-content: center; margin-left: auto; margin-right: auto; }
.szpf-detail-align-right .szpf-detail-list { justify-content: flex-end; margin-left: auto; margin-right: 0; }
.szpf-detail-align-center .szpf-detail-title { justify-content: center; text-align: center; }
.szpf-detail-align-right .szpf-detail-title { justify-content: flex-end; text-align: right; }
.szpf-detail-display-dots .szpf-detail-name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.szpf-detail-display-names .szpf-detail-swatch { display: none; }
.szpf-detail.szpf-shape-circle .szpf-detail-swatch { height: var(--szpf-swatch-size); border-radius: 50%; }
.szpf-detail.szpf-shape-square .szpf-detail-swatch { height: var(--szpf-swatch-size); border-radius: var(--szpf-corner-radius); }
.szpf-detail.szpf-shape-rectangle .szpf-detail-swatch { height: var(--szpf-swatch-height); border-radius: var(--szpf-corner-radius); }
/* One unbroken row; safe alignment keeps the first color reachable on overflow. */
.szpf-detail.szpf-detail-row .szpf-detail-list { flex-wrap: nowrap; width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; box-sizing: border-box; padding: 2px 0 8px; column-gap: var(--szpf-gap-x); }
.szpf-detail.szpf-detail-row .szpf-detail-item { width: max-content; min-width: var(--szpf-swatch-size); max-width: none; flex: 0 0 auto; }
.szpf-detail.szpf-detail-row .szpf-detail-name { white-space: nowrap; overflow-wrap: normal; max-width: none; }
.szpf-detail.szpf-detail-row.szpf-detail-display-dots .szpf-detail-item { width: var(--szpf-swatch-size); min-width: 0; }
.szpf-detail.szpf-detail-row.szpf-detail-display-names .szpf-detail-item { min-width: 0; }
.szpf-detail.szpf-detail-row.szpf-detail-align-center .szpf-detail-list { justify-content: flex-start; justify-content: safe center; }
.szpf-detail.szpf-detail-row.szpf-detail-align-right .szpf-detail-list { justify-content: flex-start; justify-content: safe flex-end; }
.szpf-detail.szpf-detail-row .szpf-detail-list:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }