.tcm-badge{position:absolute;z-index:9999;cursor:pointer;border-radius:6px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.35);border:2.5px solid #fff;transition:transform .15s ease,box-shadow .15s ease}.tcm-badge:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(0,0,0,.4)}.tcm-badge--color{position:relative}.tcm-badge--color .tcm-badge-inner{width:48px;height:48px;background:#111;display:block}.tcm-badge-f{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;font-weight:700;pointer-events:none}.tcm-badge--size{background:#111;border-color:#fff}.tcm-badge-size-label{color:#fff;font-size:16px;font-weight:700;letter-spacing:.02em;line-height:1;text-align:center;width:48px;height:48px;display:flex;align-items:center;justify-content:center}.tcm-modal{position:fixed;background:#fff;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.07);padding:10px;z-index:99999;animation:tcm-pop .15s ease forwards}@keyframes tcm-pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.tcm-modal.is-closing{animation:tcm-popout .12s ease forwards}@keyframes tcm-popout{from{opacity:1}to{opacity:0}}.tcm-grid{display:flex;flex-wrap:wrap;gap:5px;max-width:calc(6 * 42px + 5 * 5px)}.tcm-grid--size{display:flex;flex-wrap:wrap;gap:5px;max-width:calc(6 * 42px + 5 * 5px)}.tcm-swatch{flex:0 0 42px;width:42px;height:42px;border-radius:5px;cursor:pointer;border:2px solid transparent;position:relative;box-sizing:border-box;transition:transform .1s ease}.tcm-swatch:hover{transform:scale(1.1)}.tcm-swatch.is-light{border-color:#ddd}.tcm-swatch.is-active{border-color:#333}.tcm-swatch:not(.tcm-swatch--size).is-active:after{content:'';position:absolute;inset:0;border-radius:3px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center/14px no-repeat}.tcm-swatch:not(.tcm-swatch--size):before{content:attr(data-label);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#111;color:#fff;font-size:11px;white-space:nowrap;padding:3px 7px;border-radius:3px;pointer-events:none;opacity:0;transition:opacity .12s;z-index:10}.tcm-swatch:not(.tcm-swatch--size):hover:before{opacity:1}.tcm-swatch.tcm-swatch--size{flex:0 0 42px !important;width:42px !important;height:42px !important;min-width:42px !important;max-width:42px !important;min-height:42px !important;max-height:42px !important;padding:0 !important;margin:0 !important;background:#f3f4f6 !important;border:2px solid #e5e7eb !important;border-radius:5px !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:13px !important;font-weight:600 !important;color:#111 !important;cursor:pointer !important;box-sizing:border-box !important;position:relative !important;line-height:1 !important;text-align:center !important;transition:background .12s,border-color .12s,transform .1s}.tcm-swatch.tcm-swatch--size:hover{background:#e5e7eb !important;transform:scale(1.06)}.tcm-swatch.tcm-swatch--size.is-active{background:#111 !important;border-color:#111 !important;color:#fff !important}.tcm-swatch.tcm-swatch--size:after{display:none !important}.tcm-swatch.tcm-swatch--size:before{display:none !important}@media (max-width:480px){.tcm-badge--color .tcm-badge-inner{width:38px !important;height:38px !important}.tcm-badge-size-label{width:38px !important;height:38px !important;font-size:13px !important}}