/* Thread shares the material group. Authentic swatches can be added in thread-colors.mjs. */
[data-rollercam] .rc-thread-control .rc-select-trigger{font-size:13px!important}
[data-rollercam] .rc-thread-control .rc-choice-caption{white-space:nowrap}
[data-rollercam] [data-option-kind="threadColor"] [role="option"]{min-height:44px}
@media(max-width:1100px){[data-rollercam] .rc-control-section.rc-strap-section{gap:10px}}
@media(max-width:760px){
 [data-rollercam] .rc-controlbar{display:grid;grid-template-columns:64px minmax(0,1fr) 48px minmax(100px,1.5fr);gap:6px!important;padding:10px!important}
 [data-rollercam] .rc-config-menu>summary{width:64px;min-width:64px;padding-inline:2px;font-size:10px}
 [data-rollercam] .rc-controlbar>.rc-offer{margin-left:0;max-width:none}
 [data-rollercam] .rc-controlbar>.rc-offer strong{font-size:12px}
 [data-rollercam] .rc-controlbar [data-proof-order]{font-size:10px;padding:0 5px!important;min-width:0}
 [data-rollercam] .rc-controlbar>.rc-tool-group .rc-number-control{width:48px}
}

/* Same square swatch frame as the other material controls; real photos replace the fill later. */
[data-rollercam] .rc-thread-swatch{display:block;border:1px solid #ffffff24;box-sizing:border-box}
[data-rollercam] .rc-controlbar .rc-thread-control .rc-select-trigger[data-thread-placeholder="true"]{color:var(--rc-thread-ink)}
[data-rollercam] .rc-controlbar .rc-thread-control .rc-select-trigger[data-thread-placeholder="true"] .rc-choice-caption{position:absolute!important;inset:0;width:auto!important;height:auto!important;clip-path:none!important;overflow:visible;display:grid;place-items:center;color:var(--rc-thread-ink);z-index:1;font-weight:700;font-size:12px}
[data-rollercam] .rc-thread-control .rc-select-trigger:after{z-index:2;color:var(--rc-thread-ink)}
[data-rollercam] [data-option-kind="threadColor"] .rc-thread-swatch{width:36px;min-width:36px;height:36px;border-radius:4px}
[data-rollercam] [data-option-kind="threadColor"] [role="option"]{gap:12px;min-height:50px}