.product-color-swatches{display:flex;gap:4px;margin:8px 0;flex-wrap:wrap;align-items:center;justify-content:center;position:relative;z-index:10}.color-swatch{width:16px;height:16px;border:1px solid rgba(0,0,0,.2);border-radius:3px;cursor:pointer;transition:all .3s ease;display:inline-block;flex-shrink:0;position:relative;pointer-events:auto;z-index:10}.color-swatch:hover,.product-color-swatches .color-swatch:hover{transform:scale(1.25) translateY(-1px)!important;border-color:#0003!important;border-width:2px!important;box-shadow:0 4px 8px #00000026,0 0 0 1px #0000000d!important;z-index:10!important;filter:brightness(1.1)!important;pointer-events:auto!important}.color-swatch.active{border-color:#007bff!important;border-width:2px!important;box-shadow:0 0 0 1px #007bff26!important;transform:scale(1.05)!important}.color-swatch-loading{opacity:.7;transition:opacity .3s ease}.grid-view-item__image{transition:opacity .3s ease}.color-swatch.active:hover{transform:scale(1.15) translateY(-1px)!important;border-color:#0056b3!important;box-shadow:0 4px 8px #007bff33,0 0 0 2px #007bff1a!important}.product-color-circles{display:flex;gap:4px;margin:8px 0;flex-wrap:wrap;align-items:center;justify-content:center}.color-circle{width:16px;height:16px;border:1px solid rgba(0,0,0,.1);cursor:pointer;transition:all .2s ease;position:relative;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;text-shadow:0 0 2px rgba(0,0,0,.5);flex-shrink:0}.color-circle:hover{transform:scale(1.2);border-color:#0000004d;box-shadow:0 2px 4px #0003;z-index:10}.color-circle--unavailable{opacity:.5;cursor:not-allowed;position:relative}.color-circle--unavailable:hover{transform:none;box-shadow:none}.color-circle--unavailable:after{content:"";position:absolute;top:50%;left:50%;width:2px;height:12px;background-color:red;transform:translate(-50%,-50%) rotate(45deg);border-radius:1px}.color-circle--unavailable:before{content:"";position:absolute;top:50%;left:50%;width:2px;height:12px;background-color:red;transform:translate(-50%,-50%) rotate(-45deg);border-radius:1px}.color-circle--more{background-color:#f0f0f0!important;color:#666;font-size:8px;border:1px dashed #ccc;cursor:default}.color-circle--more:hover{transform:none;box-shadow:none}.color-circle__unavailable{font-size:12px;line-height:1;color:red;font-weight:700}.product-color-circles--small .color-circle{width:12px;height:12px;font-size:8px}.product-color-circles--small .color-circle--more{font-size:6px}.product-color-circles--medium .color-circle{width:16px;height:16px;font-size:10px}.product-color-circles--medium .color-circle--more{font-size:8px}.product-color-circles--large .color-circle{width:20px;height:20px;font-size:12px}.product-color-circles--large .color-circle--more{font-size:10px}.product-card .product-color-circles{margin:8px 0}.product-card__info .product-color-circles{order:1}@media (max-width: 768px){.product-color-circles{gap:3px;margin:6px 0}.color-circle{width:14px;height:14px;font-size:9px}.product-color-circles--small .color-circle{width:10px;height:10px;font-size:7px}.product-color-circles--small .color-circle--more{font-size:6px}}@media (max-width: 480px){.product-color-circles{gap:2px;margin:4px 0}.color-circle{width:12px;height:12px;font-size:8px}.product-color-circles--small .color-circle{width:8px;height:8px;font-size:6px}}@media (prefers-color-scheme: dark){.color-circle{border-color:#fff3}.color-circle--more{background-color:#333!important;color:#ccc;border-color:#555}}@media (prefers-contrast: high){.color-circle{border-width:2px;border-color:#000}.color-circle:hover{border-color:#000;box-shadow:0 0 0 2px #000}}@media (prefers-reduced-motion: reduce){.color-circle{transition:none}.color-circle:hover{transform:none}}.color-circle:focus{outline:2px solid #007bff;outline-offset:2px}.product-color-circles[data-loading=true]{opacity:.6;pointer-events:none}.product-color-circles[data-loading=true]:after{content:"";position:absolute;top:50%;left:50%;width:16px;height:16px;border:2px solid #f3f3f3;border-top:2px solid #007bff;border-radius:50%;animation:spin 1s linear infinite;transform:translate(-50%,-50%)}@keyframes spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/*# sourceMappingURL=/cdn/shop/t/394/assets/color-circles.css.map */