.gallery-color-grid .color-choice{padding:16px 14px 13px!important;gap:7px}
.gallery-color-grid .color-choice.selected{padding:15px 13px 12px!important}
.gallery-color-grid .color-disc{width:44px;height:44px}
.color-example-count{font-size:12px;color:var(--muted)}
#color-gallery{margin-top:32px;min-width:0}
.gallery-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.gallery-heading h2{font-family:Manrope,sans-serif;font-size:23px;letter-spacing:-.6px;margin:0}
.gallery-heading .eyebrow{font-size:12px;margin-bottom:8px}
.gallery-heading .text-btn{flex-shrink:0}
.gallery-intro{font-size:14px;color:var(--muted);line-height:1.6;margin:12px 0 18px}
.example-viewer{border:1px solid var(--line);border-radius:20px;overflow:hidden;background:white}
.example-image-button{border:0;border-radius:0;background:#edf0f6;position:relative;display:flex;align-items:center;justify-content:center;width:100%;padding:0;cursor:zoom-in;aspect-ratio:1.2;max-height:520px}
.example-image-button img{display:block;width:100%;height:100%;object-fit:contain;max-height:520px}
.enlarge-label{position:absolute;right:14px;bottom:14px;background:#ffffffed;backdrop-filter:blur(5px);color:var(--ink);padding:8px 12px;font-size:12px;border-radius:8px;box-shadow:0 2px 10px #20223510}
.gallery-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px}
.gallery-controls .secondary{padding:10px;width:45px;min-height:43px;font-size:20px;flex-shrink:0}
.gallery-controls .secondary:disabled{opacity:.35;cursor:default}
.example-caption{display:flex;flex-direction:column;gap:5px;text-align:center;min-width:0}
.example-caption strong{font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.example-caption span{font-size:12px;color:var(--muted)}
.example-thumbnails{display:flex;gap:9px;overflow-x:auto;padding:10px 3px 8px;margin-top:6px;scrollbar-width:thin;scrollbar-color:#c1c6dc transparent}
.example-thumb{border:2px solid transparent;border-radius:10px;background:#edf0f6;flex:0 0 72px;width:72px;height:72px;padding:2px;overflow:hidden}
.example-thumb.current{border-color:var(--accent)}
.example-thumb:hover{border-color:#8e97da}
.example-thumb img{width:100%;height:100%;display:block;object-fit:contain;border-radius:6px}
.custom-color-details{margin-top:25px}
.custom-color-details summary{font-weight:500;color:var(--muted)}
.custom-color-details .custom-color-row{margin-top:14px}
#example-dialog{width:min(950px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:18px;border:1px solid var(--line);border-radius:22px;background:white;color:var(--ink);overflow:auto}
#example-dialog::backdrop{background:#141526cc;backdrop-filter:blur(8px)}
.lightbox-top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:14px}
.lightbox-top h2{font-family:Manrope,sans-serif;font-size:22px;margin:0;letter-spacing:-.4px}
.lightbox-top .secondary{min-height:42px;padding:10px 14px}
#lightbox-image{display:block;width:100%;height:min(70dvh,760px);object-fit:contain;background:#f4f5f8;border-radius:12px}
#lightbox-caption{margin:0;color:var(--muted);font-size:14px}
#example-dialog .gallery-controls{padding:14px 0 0}
.viewing-example{overflow:hidden}
@media(max-width:760px){.gallery-color-grid .color-choice{padding:16px 6px 12px!important;gap:7px}.gallery-color-grid .color-choice.selected{padding:15px 5px 11px!important}.gallery-color-grid .color-disc{width:38px;height:38px}.gallery-heading h2{font-size:21px}.gallery-heading{gap:12px}.gallery-heading .text-btn{font-size:12px}.example-image-button{aspect-ratio:1}.gallery-controls{padding:13px 12px;gap:10px}.example-thumb{flex-basis:62px;width:62px;height:62px}.enlarge-label{font-size:12px;right:10px;bottom:10px;padding:7px 9px}#example-dialog{padding:12px;width:calc(100vw - 20px);max-height:calc(100dvh - 20px);border-radius:16px}.lightbox-top h2{font-size:18px}#lightbox-image{height:min(65dvh,600px)}.lightbox-top{gap:12px}}