.color-variants{margin-top:20px;padding:10px 15px;border:1px solid #ddd;border-radius:10px;background-color:#f9f9f9;box-shadow:0 4px 6px rgba(0,0,0,0.1)}.color-variants h3{font-size:1.2rem;color:#333;margin-bottom:10px;font-weight:600}.color-btn{width:30px;height:30px;border:2px solid #ccc;border-radius:50%;margin-right:10px;cursor:pointer;transition:all 0.3s ease;display:inline-block;position:relative}.color-btn:hover{border-color:#666;transform:scale(1.1)}.color-btn.active{z-index:1;border-color:#333;box-shadow:0 0 8px rgba(0,0,0,0.2);transform:scale(1.1)}.color-btn::after{content:attr(data-color);position:absolute;top:50px;left:50%;transform:translateX(-50%);background-color:#333;color:#fff;padding:5px 8px;border-radius:5px;font-size:0.75rem;display:none;white-space:nowrap}.color-btn:hover::after{display:block}.color-img{width:75px;height:75px;object-fit:cover;border:2px solid #ccc;border-radius:10px;margin-right:10px;cursor:pointer;transition:all 0.3s ease}.color-img:hover{border-color:#666;transform:scale(1.1)}.color-img.active{border-color:#333;box-shadow:0 0 8px rgba(0,0,0,0.3);transform:scale(1.1)}.color-options{display:flex;gap:15px}.color-option{text-align:center;flex-shrink:0}.color-label{margin-top:5px;font-size:0.85rem;color:#555}.color-option.active.color-label{font-weight:bold;color:#000}.color-option.active img{border:3px solid #333;border-radius:8px;transform:scale(1.05);box-shadow:0 0 6px rgba(0,0,0,0.2);transition:all 0.3s ease}