:root{--cp-brand: #E8735A;--cp-brand-dark: #D4614A;--cp-brand-glow: rgba(232, 115, 90, .25);--cp-brand-subtle: rgba(232, 115, 90, .08);--cp-text-primary: #1a1a2e;--cp-text-secondary: #64748b;--cp-text-muted: #94a3b8;--cp-bg-primary: #fafbfc;--cp-bg-card: #ffffff;--cp-border: rgba(0, 0, 0, .06);--cp-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);--cp-shadow-md: 0 4px 12px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04);--cp-shadow-lg: 0 12px 40px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);--cp-shadow-xl: 0 20px 60px rgba(0,0,0,.12), 0 8px 20px rgba(0,0,0,.06);--cp-radius-sm: 8px;--cp-radius-md: 12px;--cp-radius-lg: 16px;--cp-radius-xl: 24px;--cp-transition: cubic-bezier(.4, 0, .2, 1);--cp-bounce: cubic-bezier(.34, 1.56, .64, 1)}.color-picker-root{position:relative;padding-bottom:200px;background:var(--cp-bg-primary);min-height:100vh}.cp-container{max-width:1280px;margin:0 auto;padding:24px 20px}.cp-header{text-align:center;padding:40px 20px 36px;position:relative}.cp-header:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:120px;height:4px;background:linear-gradient(90deg,transparent,var(--cp-brand),transparent);border-radius:2px}.cp-title{font-size:32px;font-weight:800;background:linear-gradient(135deg,var(--cp-brand) 0%,#e85d8a 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;letter-spacing:-.5px;line-height:1.2}.cp-subtitle{color:var(--cp-text-secondary);font-size:15px;font-weight:400;letter-spacing:.3px}.cp-filter-section{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-bottom:20px;padding:6px;background:var(--cp-bg-card);border-radius:var(--cp-radius-xl);box-shadow:var(--cp-shadow-sm);border:1px solid var(--cp-border);max-width:680px;margin-left:auto;margin-right:auto}.cp-filter-btn{padding:10px 18px;border:none;background:transparent;border-radius:20px;cursor:pointer;font-size:13px;font-weight:600;color:var(--cp-text-secondary);transition:all .3s var(--cp-transition);position:relative;overflow:hidden;letter-spacing:.2px}.cp-filter-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--cp-brand);border-radius:inherit;opacity:0;transform:scale(.8);transition:all .3s var(--cp-transition)}.cp-filter-btn:hover{color:var(--cp-brand);background:var(--cp-brand-subtle)}.cp-filter-btn.active{color:#fff;background:var(--cp-brand);box-shadow:0 4px 12px var(--cp-brand-glow);transform:scale(1.02)}.cp-filter-btn.active:hover{background:var(--cp-brand-dark)}.cp-quantity-section{display:flex;justify-content:center;gap:10px;margin-bottom:32px;padding:4px}.cp-qty-btn{padding:10px 22px;border:2px solid var(--cp-border);background:var(--cp-bg-card);border-radius:var(--cp-radius-lg);cursor:pointer;font-size:14px;font-weight:600;color:var(--cp-text-secondary);transition:all .3s var(--cp-transition);position:relative;overflow:hidden}.cp-qty-btn:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,var(--cp-brand-subtle),transparent);opacity:0;transition:opacity .3s}.cp-qty-btn:hover{border-color:var(--cp-brand);color:var(--cp-brand);transform:translateY(-1px);box-shadow:var(--cp-shadow-sm)}.cp-qty-btn.active{background:linear-gradient(135deg,var(--cp-brand),var(--cp-brand-dark));border-color:var(--cp-brand);color:#fff;box-shadow:0 4px 16px var(--cp-brand-glow);transform:translateY(-1px)}.cp-color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-bottom:30px;padding:20px;background:var(--cp-bg-card);border-radius:var(--cp-radius-lg);box-shadow:var(--cp-shadow-sm);border:1px solid var(--cp-border);animation:fadeInGrid .4s var(--cp-transition)}@keyframes fadeInGrid{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.cp-color-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;padding:12px 8px;border-radius:var(--cp-radius-md);transition:all .3s var(--cp-transition);position:relative;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.cp-color-item:hover{background:#00000005;transform:translateY(-3px)}.cp-color-item:active{transform:translateY(0) scale(.97)}.cp-color-circle{display:block!important;width:72px;height:72px;border-radius:50%;border:3px solid #ffffff;box-shadow:0 4px 12px #0000001a,0 1px 4px #0000000f,inset 0 -2px 4px #0000000d;transition:all .35s var(--cp-transition);position:relative}.cp-color-circle:before{content:"";position:absolute;top:-6px;right:-6px;bottom:-6px;left:-6px;border-radius:50%;border:2px solid transparent;transition:all .35s var(--cp-transition)}.cp-color-circle:after{content:"";position:absolute;top:8px;left:12px;width:24px;height:12px;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,transparent 100%);border-radius:50%;opacity:.6}.cp-color-item:hover .cp-color-circle{transform:scale(1.12);box-shadow:0 8px 24px #00000026,0 2px 8px #0000001a,inset 0 -2px 4px #0000000d}.cp-color-item.selected .cp-color-circle{transform:scale(1.08);box-shadow:0 6px 20px var(--cp-brand-glow),0 2px 8px #00000014}.cp-color-item.selected .cp-color-circle:before{border-color:var(--cp-brand);animation:selectPulse 1.5s ease-in-out infinite}@keyframes selectPulse{0%,to{border-color:var(--cp-brand);opacity:1}50%{border-color:var(--cp-brand);opacity:.5}}.cp-color-item.selected:after{content:"\2713";position:absolute;top:8px;right:12px;width:20px;height:20px;background:var(--cp-brand);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;box-shadow:0 2px 6px var(--cp-brand-glow);animation:checkIn .3s var(--cp-bounce)}@keyframes checkIn{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.cp-color-label{margin-top:10px;text-align:center;transition:all .3s}.cp-color-code{font-size:13px;font-weight:700;color:var(--cp-text-primary);display:block;line-height:1.3;letter-spacing:.3px}.cp-color-hex{font-size:10px;color:var(--cp-text-muted);display:block;line-height:1.3;margin-top:2px;font-family:SF Mono,Monaco,Menlo,monospace}.cp-color-item.selected .cp-color-code{color:var(--cp-brand)}.cp-selection-display{position:fixed;bottom:0;left:50%;transform:translate(-50%) translateY(0);width:calc(100% - 32px);max-width:800px;background:#ffffffeb;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);padding:18px 24px;border-radius:var(--cp-radius-xl) var(--cp-radius-xl) 0 0;box-shadow:var(--cp-shadow-xl);z-index:9999;border:1px solid rgba(255,255,255,.6);border-bottom:none;transition:all .4s var(--cp-transition);animation:slideUp .5s var(--cp-transition)}@keyframes slideUp{0%{transform:translate(-50%) translateY(100%);opacity:0}to{transform:translate(-50%) translateY(0);opacity:1}}.cp-selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.cp-selection-title{font-size:15px;font-weight:700;color:var(--cp-text-primary);letter-spacing:-.2px}.cp-selection-count{font-size:13px;color:var(--cp-brand);font-weight:700;background:var(--cp-brand-subtle);padding:4px 12px;border-radius:20px}.cp-selection-list{display:flex;flex-wrap:wrap;gap:8px;max-height:100px;overflow-y:auto;padding-right:5px;margin-bottom:14px;scrollbar-width:thin;scrollbar-color:var(--cp-brand) transparent}.cp-selection-list::-webkit-scrollbar{width:4px}.cp-selection-list::-webkit-scrollbar-thumb{background:var(--cp-brand);border-radius:4px}.cp-selection-item{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,var(--cp-brand-subtle),rgba(232,115,90,.04));border-radius:20px;font-size:12px;font-weight:500;color:var(--cp-text-primary);border:1px solid rgba(232,115,90,.2);transition:all .2s;animation:chipIn .25s var(--cp-bounce)}@keyframes chipIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.cp-selection-item:hover{border-color:var(--cp-brand);box-shadow:0 2px 8px var(--cp-brand-glow)}.cp-selection-item .cp-remove{cursor:pointer;color:var(--cp-brand);font-weight:700;font-size:16px;line-height:1;padding:0 2px;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;transition:all .2s}.cp-selection-item .cp-remove:hover{background:var(--cp-brand);color:#fff;transform:scale(1.1)}.cp-empty-selection{color:var(--cp-text-muted);font-size:13px;padding:8px 0}.cp-add-to-cart-btn{width:100%;padding:15px 24px;background:linear-gradient(135deg,var(--cp-brand) 0%,#e85d8a 100%);color:#fff;border:none;border-radius:var(--cp-radius-md);font-size:15px;font-weight:700;cursor:pointer;transition:all .3s var(--cp-transition);letter-spacing:.5px;position:relative;overflow:hidden}.cp-add-to-cart-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.2) 0%,transparent 50%);opacity:0;transition:opacity .3s}.cp-add-to-cart-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 24px var(--cp-brand-glow)}.cp-add-to-cart-btn:hover:not(:disabled):before{opacity:1}.cp-add-to-cart-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.cp-add-to-cart-btn:disabled{background:linear-gradient(135deg,#cbd5e1,#94a3b8);cursor:not-allowed;box-shadow:none}.cp-cart-badge{position:fixed;top:80px;right:20px;background:linear-gradient(135deg,var(--cp-brand),var(--cp-brand-dark));color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 6px 24px var(--cp-brand-glow);z-index:999999;cursor:pointer;text-decoration:none;transition:all .3s var(--cp-transition);animation:badgeIn .5s var(--cp-bounce) .3s backwards}@keyframes badgeIn{0%{transform:scale(0)}to{transform:scale(1)}}.cp-cart-badge:hover{transform:scale(1.1) rotate(-5deg);box-shadow:0 8px 32px #e8735a66}.cp-cart-badge-count{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:11px;font-weight:800;min-width:22px;height:22px;padding:0 5px;border-radius:11px;display:flex;align-items:center;justify-content:center;border:2px solid white;box-shadow:0 2px 6px #ef444466}@media(min-width:1024px){.cp-container{padding:32px 40px}.cp-header{padding:48px 20px 40px}.cp-title{font-size:38px}.cp-color-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:18px;padding:28px}.cp-color-circle{width:80px;height:80px}.cp-selection-display{bottom:16px;border-radius:var(--cp-radius-xl);border:1px solid rgba(255,255,255,.6);padding:20px 28px}}@media(max-width:768px){.cp-header{padding:28px 16px 24px}.cp-title{font-size:24px}.cp-subtitle{font-size:13px}.cp-filter-section{gap:6px;padding:4px;border-radius:var(--cp-radius-lg)}.cp-filter-btn{padding:8px 12px;font-size:12px}.cp-qty-btn{padding:8px 16px;font-size:13px}.cp-color-grid{grid-template-columns:repeat(3,1fr);gap:10px;padding:14px;border-radius:var(--cp-radius-md)}.cp-color-item{padding:8px 4px}.cp-color-circle{width:58px;height:58px}.cp-color-code{font-size:12px}.cp-color-hex{font-size:9px}.cp-selection-display{width:100%;border-radius:var(--cp-radius-lg) var(--cp-radius-lg) 0 0;padding:14px 16px;bottom:0}.cp-cart-badge{width:48px;height:48px;font-size:18px;top:auto;bottom:200px;right:12px}}@media(max-width:480px){.cp-color-grid{grid-template-columns:repeat(3,1fr);gap:8px;padding:10px}.cp-color-circle{width:50px;height:50px}.cp-color-item.selected:after{width:16px;height:16px;font-size:9px;top:4px;right:6px}.cp-quantity-section{gap:6px}.cp-qty-btn{padding:7px 12px;font-size:12px;border-radius:var(--cp-radius-sm)}}.cp-color-item{animation:itemFadeIn .3s var(--cp-transition) backwards}.cp-color-item:nth-child(1){animation-delay:.02s}.cp-color-item:nth-child(2){animation-delay:.04s}.cp-color-item:nth-child(3){animation-delay:.06s}.cp-color-item:nth-child(4){animation-delay:.08s}.cp-color-item:nth-child(5){animation-delay:.1s}.cp-color-item:nth-child(6){animation-delay:.12s}.cp-color-item:nth-child(7){animation-delay:.14s}.cp-color-item:nth-child(8){animation-delay:.16s}.cp-color-item:nth-child(9){animation-delay:.18s}.cp-color-item:nth-child(10){animation-delay:.2s}.cp-color-item:nth-child(11){animation-delay:.22s}.cp-color-item:nth-child(12){animation-delay:.24s}@keyframes itemFadeIn{0%{opacity:0;transform:translateY(10px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.cp-toast{position:fixed;top:24px;left:50%;transform:translate(-50%) translateY(-100px);background:#fffffff2;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:14px 24px;border-radius:var(--cp-radius-md);box-shadow:var(--cp-shadow-lg);border:1px solid var(--cp-border);z-index:100000;font-size:14px;font-weight:600;color:var(--cp-text-primary);transition:transform .4s var(--cp-bounce);display:flex;align-items:center;gap:10px}.cp-toast.show{transform:translate(-50%) translateY(0)}.cp-toast.success{border-left:4px solid #10b981}.cp-toast.error{border-left:4px solid #ef4444}.cp-toast-icon{font-size:18px}.cp-skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:50%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.cp-scroll-top{position:fixed;bottom:220px;right:20px;width:40px;height:40px;background:var(--cp-bg-card);border:1px solid var(--cp-border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--cp-shadow-md);transition:all .3s;opacity:0;pointer-events:none;z-index:9998}.cp-scroll-top.visible{opacity:1;pointer-events:auto}.cp-scroll-top:hover{transform:translateY(-2px);box-shadow:var(--cp-shadow-lg)}
/*# sourceMappingURL=/cdn/shop/t/8/assets/section-cpicker-v3.css.map */