:root{--tcs-mobile-grid-min:140px;--tcs-mobile-grid-template:repeat(auto-fit,minmax(min(var(--tcs-mobile-grid-min,140px),100%),1fr));--tcs-mobile-grid-template-color:var(--tcs-mobile-grid-template);--tcs-mobile-grid-template-size:var(--tcs-mobile-grid-template)}
.tcs-swatch-field{margin:12px 0 18px}
.tcs-swatch-head{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-bottom:6px}
.tcs-swatch-label{font-weight:600;letter-spacing:.03em;font-size:12px;text-transform:uppercase;color:#111827}
.tcs-swatch-current{font-size:12px;color:#4b5563}
.tcs-swatch-grid{display:grid;grid-template-columns:repeat(var(--tcs-grid-cols),minmax(0,1fr));gap:8px}
.tcs-layout-list.tcs-swatch-grid{grid-template-columns:repeat(1,minmax(0,1fr))}
.tcs-swatch-btn{position:relative;display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:1px solid #d1d5db;background:#fff;border-radius:10px;cursor:pointer;transition:all .18s ease;min-height:38px;text-decoration:none;box-shadow:none}
.tcs-swatch-btn .tcs-swatch-text{flex:1;text-align:left;font-size:13px;color:#111827;line-height:1.25}
.tcs-swatch-btn .tcs-swatch-text,
.tcs-swatch-btn .tcs-swatch-text-size{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:normal;overflow-wrap:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tcs-swatch-btn .tcs-swatch-text:empty{display:none}
.tcs-swatch-chip{width:var(--tcs-chip-w,22px);height:var(--tcs-chip-h,22px);border-radius:6px;border:1px solid #e5e7eb;background:#f3f4f6;display:inline-block;flex-shrink:0}
.tcs-swatch-chip--image{background-size:var(--tcs-chip-img-mode,cover);background-position:center center; border-color:transparent;background-repeat:no-repeat;}
.tcs-swatch-btn:hover{border-color:#111827;box-shadow:none;transform:translateY(-1px)}
.tcs-swatch-btn.is-active,
.tcs-swatch-btn[aria-pressed="true"]{background:#e5e7eb !important;outline:2px solid #111827 !important;outline-offset:1px;border-color:#111827 !important}
.tcs-swatch-btn.is-active::after,
.tcs-swatch-btn[aria-pressed="true"]::after{content:"";position:absolute;inset:-3px;border:2px solid #111827;border-radius:inherit;pointer-events:none;box-shadow:none}
.tcs-swatch-btn.is-disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.tcs-swatch-btn.is-disabled:hover{border-color:#d1d5db}
.tcs-chip-fill{padding:0 !important;min-height:0 !important;align-items:stretch;justify-content:center}
.tcs-chip-fill .tcs-swatch-chip{width:100%;height:100%;border-radius:inherit;border:0}
.tcs-chip-fill .tcs-swatch-text{display:none}
.tcs-image-only.tcs-swatch-color{padding:0 !important;gap:0 !important;min-height:var(--tcs-chip-h,22px) !important;align-items:stretch;justify-content:stretch}
.tcs-image-only.tcs-swatch-color .tcs-swatch-chip{height:100%;border:0;border-radius:inherit}
.tcs-archive-btn.tcs-image-only.tcs-swatch-color{border:0 !important;padding:0 !important}
.tcs-image-only.tcs-shape-circle.tcs-swatch-color{padding:0 !important;min-height:var(--tcs-chip-h,22px) !important;align-items:center;justify-content:center}
.tcs-image-only.tcs-shape-circle.tcs-swatch-color .tcs-swatch-chip{border:0;border-radius:inherit;min-height:var(--tcs-chip-h,22px)}
.tcs-shape-circle .tcs-swatch-chip{border-radius:50% !important}
.tcs-shape-circle{border-radius:999px !important}
.tcs-shape-square .tcs-swatch-chip{border-radius:0 !important}
.tcs-shape-square{border-radius:0 !important}
.tcs-grid-size{justify-content:flex-start; }
.tcs-swatch-grid.tcs-theme-minimal {max-width: 100%;}
.tcs-theme-basic .tcs-swatch-btn{border-radius:12px;border:1px solid #d7dce3;background:linear-gradient(135deg,#f8fafc,#eef2f7);box-shadow:none}
.tcs-theme-basic .tcs-swatch-btn:hover{box-shadow:none;transform:translateY(-2px)}
.tcs-theme-basic .tcs-swatch-btn.is-active,
.tcs-theme-basic .tcs-swatch-btn[aria-pressed="true"]{background:#e0e7ff !important;border-color:#1d4ed8 !important;outline-color:#1d4ed8;box-shadow:none}
.tcs-theme-basic .tcs-swatch-btn.is-active::after,
.tcs-theme-basic .tcs-swatch-btn[aria-pressed="true"]::after{border-color:#1d4ed8}

.tcs-theme-dark .tcs-swatch-btn{border:1px solid #1f2937;background:#0b0f1a;color:#e2e8f0;box-shadow:none}
.tcs-theme-dark .tcs-swatch-btn .tcs-swatch-text{color:#e2e8f0}
.tcs-theme-dark .tcs-swatch-btn:hover{border-color:#38bdf8;box-shadow:none;transform:translateY(-2px)}
.tcs-theme-dark .tcs-swatch-chip{border-color:#334155;background:#111827}
.tcs-theme-dark .tcs-swatch-btn.is-active,
.tcs-theme-dark .tcs-swatch-btn[aria-pressed="true"]{border-color:#38bdf8 !important;border-width:2px;box-shadow:none;background:#0b1220 !important;outline:2px solid #38bdf8}
.tcs-theme-dark .tcs-swatch-btn.is-active::after,
.tcs-theme-minimal .tcs-swatch-btn{border-radius:6px;padding:6px 8px;border:1px solid #e5e7eb;box-shadow:none}
.tcs-theme-minimal .tcs-swatch-btn:hover{transform:none;box-shadow:none}
.tcs-swatch-btn:focus-visible{outline:2px solid #2563eb;outline-offset:1px}
.tcs-swatch-field select[data-tcs-swatch="1"]{margin-top:6px}
.tcs-swatch-dropdown{position:relative}
.tcs-swatch-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:8px 10px;border:1px solid #d1d5db;border-radius:10px;background:#fff;cursor:pointer;gap:10px}
.tcs-toggle-current{font-size:13px;color:#111827}
.tcs-toggle-caret{font-size:12px;color:#6b7280}
.tcs-swatch-panel{margin-top:8px}
.tcs-swatch-panel[hidden]{display:none}
.tcs-swatch-dropdown.is-open .tcs-swatch-toggle{border-color:#111827;box-shadow:0 0 0 1px #111827 inset}
.tcs-swatch-text.tcs-swatch-text-size {text-align:center;}
@media (max-width:640px){
.tcs-swatch-grid:not(.tcs-layout-list){grid-template-columns:var(--tcs-mobile-grid-template)}
.tcs-swatch-grid.tcs-grid-color:not(.tcs-layout-list){grid-template-columns:var(--tcs-mobile-grid-template-color,var(--tcs-mobile-grid-template))}
.tcs-swatch-grid.tcs-grid-size:not(.tcs-layout-list){grid-template-columns:var(--tcs-mobile-grid-template-size,var(--tcs-mobile-grid-template))}
.tcs-swatch-btn{padding:7px 8px;gap:6px}}