/*
 LOCDEV · ẢNH BIẾN THỂ
 Ảnh tròn gọn, vùng bấm 44px, có trạng thái chọn/focus;
 không đổi số cột hoặc giá sản phẩm.
*/
.locdev-color-options { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:2px 8px; margin:6px 0; clear:both; }
.locdev-color-options .locdev-color-option { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:5px; margin:0; box-sizing:border-box; border:0; background:transparent; text-decoration:none; color:var(--locdev-color-ink); line-height:1.2; }
.locdev-color-option img { display:block; width:32px!important; height:32px!important; object-fit:cover; padding:2px; border:1px solid var(--locdev-color-input); border-radius:50%; box-sizing:border-box; margin:0!important; }
.locdev-color-option span { padding:6px 9px; border:1px solid var(--locdev-color-input); border-radius:5px; font-size:13px; }
.locdev-color-option:hover img,.locdev-color-option[aria-pressed="true"] img,.locdev-color-option[aria-pressed="true"] span { border:2px solid var(--locdev-color-accent); }
.locdev-color-option:focus-visible { outline:2px solid var(--locdev-color-accent); outline-offset:1px; border-radius:5px; }
.locdev-color-options .locdev-color-more { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:0; padding:0 4px; box-sizing:border-box; color:var(--locdev-color-ink-2); text-decoration:none; font-size:12px; font-weight:600; line-height:1.2; white-space:nowrap; }
.locdev-color-more span { padding:8px; border:1px solid var(--locdev-color-rule); border-radius:16px; background:var(--locdev-color-paper-2); }
.locdev-color-more:hover { color:var(--locdev-color-ink); }
.locdev-color-more:hover span { border-color:var(--locdev-color-input); }
.locdev-color-more:focus-visible { outline:2px solid var(--locdev-color-accent); outline-offset:1px; border-radius:6px; }
.locdev-color-picked .box-image .back-image { display:none!important; }
.locdev-color-picked .box-image img:not(.back-image) { opacity:1!important; }
.locdev-color-status { position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Single product: native select is hidden only after the working buttons are built. */
.locdev-single-color-control .locdev-native-color-select { display:none!important; }
.locdev-single-colors[hidden] { display:none!important; }
.locdev-single-colors { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:4px 0 10px; }
.locdev-single-colors .locdev-single-color { display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-width:48px; min-height:48px; max-width:100%; margin:0; padding:3px 12px; border:1px solid var(--locdev-color-input); border-radius:6px; background:var(--locdev-color-paper); color:var(--locdev-color-ink); box-shadow:none; font:inherit; font-size:14px; font-weight:500; letter-spacing:normal; line-height:1.4; text-transform:none; cursor:pointer; }
.locdev-single-colors .locdev-single-color.has-image { width:48px; height:48px; padding:3px; border-radius:50%; }
.locdev-single-color img { display:block; width:40px!important; height:40px!important; max-width:none; margin:0!important; padding:0; border:0; border-radius:50%; object-fit:cover; }
.locdev-single-color span { overflow-wrap:anywhere; }
.locdev-single-colors .locdev-single-color:hover:not(:disabled) { border-color:var(--locdev-color-swatch-selected); }
.locdev-single-colors .locdev-single-color[aria-pressed="true"] { border-color:var(--locdev-color-swatch-selected); box-shadow:0 0 0 2px var(--locdev-color-swatch-selected); }
.locdev-single-colors .locdev-single-color:focus-visible { outline:2px solid var(--locdev-color-ink); outline-offset:4px; }
.locdev-single-colors .locdev-single-color:disabled { opacity:.4; cursor:not-allowed; }