.color-grid{--cg-nav-height: 56px;--cg-card-min-width: 150px;--cg-card-gap: 16px;--cg-section-gap: 48px;--cg-pill-bg: #f5f5f5;--cg-pill-bg-active: #000;--cg-pill-color: #333;--cg-pill-color-active: #fff;--cg-skeleton-bg: #e0e0e0}.color-grid__nav{position:sticky;top:var(--header-height, 60px);z-index:5;background:#fff;border-bottom:1px solid #e5e5e5}.color-grid__nav-inner{display:flex;align-items:center;justify-content:center;gap:16px;max-width:1400px;margin:0 auto;padding:12px 20px}.color-grid__search{position:relative;width:200px;flex-shrink:0}.color-grid__search-input{width:100%;height:36px;padding:8px 12px 8px 36px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;background:#fafafa;transition:border-color .2s ease,background-color .2s ease}.color-grid__search-input:focus{outline:none;border-color:#000;background:#fff}.color-grid__search-input::placeholder{color:#999}.color-grid__search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#999;pointer-events:none}.color-grid__pills{display:flex;align-items:center;gap:8px;overflow-x:auto;flex:1;scrollbar-width:none;-ms-overflow-style:none}.color-grid__pills::-webkit-scrollbar{display:none}.color-grid__pill{padding:6px 14px;background:var(--cg-pill-bg);color:var(--cg-pill-color);border:none;border-radius:20px;font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .2s ease,color .2s ease,transform .15s ease}.color-grid__pill:hover{background:#e8e8e8}.color-grid__pill:active{transform:scale(.96)}.color-grid__pill.is-active{background:var(--cg-pill-bg-active);color:var(--cg-pill-color-active)}.color-grid__pill[hidden],.color-grid__dropdown{display:none}.color-grid__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:10px 14px;background:#fff;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;font-weight:500;color:#333;cursor:pointer;transition:border-color .2s ease}.color-grid__dropdown-trigger:hover{border-color:#ccc}.color-grid__dropdown-trigger[aria-expanded=true]{border-color:#000}.color-grid__dropdown-trigger svg{transition:transform .2s ease}.color-grid__dropdown-trigger[aria-expanded=true] svg{transform:rotate(180deg)}.color-grid__dropdown-label{flex:1;text-align:left}.color-grid__dropdown-panel{position:fixed;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff;display:flex;flex-direction:column;animation:cg-slide-up .25s ease}.color-grid__dropdown-panel[hidden]{display:none}.color-grid__dropdown-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #e5e5e5}.color-grid__dropdown-title{font-size:18px;font-weight:600;margin:0}.color-grid__dropdown-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#f5f5f5;border:none;border-radius:50%;font-size:20px;cursor:pointer;transition:background-color .2s ease}.color-grid__dropdown-close:hover{background:#e8e8e8}.color-grid__dropdown-items{flex:1;overflow-y:auto;padding:8px 0}.color-grid__dropdown-item{display:block;width:100%;padding:14px 20px;background:transparent;border:none;text-align:left;font-size:16px;color:#333;cursor:pointer;transition:background-color .15s ease}.color-grid__dropdown-item:hover{background:#f5f5f5}.color-grid__dropdown-item.is-active{background:#f0f0f0;font-weight:600}.color-grid__dropdown-item[hidden]{display:none}.color-grid__header{padding:32px 20px 24px;max-width:1400px;margin:0 auto;border-bottom:1px solid #e5e5e5}.color-grid__header-inner{display:flex;flex-direction:column;gap:20px}.color-grid__header-top{display:flex;flex-direction:column;gap:6px}.color-grid__header-title-wrap{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}.color-grid__header-title{font-size:28px;font-weight:600;letter-spacing:-.02em;color:#000;margin:0;line-height:1.1}.color-grid__header-count{font-size:14px;color:#666;font-weight:400;padding:4px 10px;background:#f5f5f5;border-radius:4px}.color-grid__count-number{font-weight:600;color:#000;font-variant-numeric:tabular-nums}.color-grid__header-subtitle{font-size:14px;color:#888;margin:0;letter-spacing:.01em}.color-grid__filters{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.color-grid__filter-group{display:flex;align-items:center;gap:8px}.color-grid__filter-label{font-size:13px;color:#666;font-weight:500}.color-grid__filter-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1px solid #ddd;border-radius:6px;font-size:13px;font-weight:500;color:#333;cursor:pointer;transition:all .15s ease}.color-grid__filter-btn:hover:not(:disabled){border-color:#000;background:#fafafa}.color-grid__filter-btn:disabled{opacity:.5;cursor:not-allowed}.color-grid__filter-btn.is-active{background:#000;border-color:#000;color:#fff}.color-grid__filter-btn svg{opacity:.5;transition:transform .2s ease}.color-grid__filter-btn.is-active svg{opacity:1;transform:rotate(180deg)}.color-grid__filter{position:relative}.color-grid__filter-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:180px;max-height:280px;overflow-y:auto;background:#fff;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 12px #0000001a;z-index:100;padding:4px 0}.color-grid__filter-menu[hidden]{display:none}.color-grid__filter-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;background:transparent;border:none;font-size:13px;color:#333;text-align:left;cursor:pointer;transition:background-color .15s ease}.color-grid__filter-option:hover{background:#f5f5f5}.color-grid__filter-option.is-selected{background:#f0f0f0;font-weight:600;color:#000}.color-grid__filter-option-count{font-size:12px;color:#888;font-weight:400;margin-left:8px}.color-grid__filter-option.is-selected .color-grid__filter-option-count{color:#666}.color-grid__filter-btn.has-selection{background:#f0f0f0;border-color:#000}.color-grid__filter-btn.has-selection .color-grid__filter-text{font-weight:600}.color-grid__filter-clear{padding:8px 12px;background:transparent;border:none;font-size:13px;font-weight:500;color:#666;cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color .15s ease}.color-grid__filter-clear:hover{color:#000}.color-grid__filter-clear[hidden]{display:none}.color-grid__filter-btn.has-selection:after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:#000;border-radius:50%}.color-grid__filter-btn{position:relative}@media (max-width: 768px){.color-grid__header{padding:24px 16px 20px}.color-grid__header-title{font-size:22px}.color-grid__header-title-wrap{flex-direction:column;align-items:flex-start;gap:8px}.color-grid__filter-group{flex-wrap:wrap}.color-grid__filter-btn{padding:6px 10px;font-size:12px}.color-grid__filter-menu{min-width:160px;max-height:240px}}.color-grid__loading{padding:40px 20px;max-width:1400px;margin:0 auto}.color-grid__loading[hidden]{display:none}.color-grid__loading-text{text-align:center;font-size:14px;color:#666;margin-bottom:24px}.color-grid__skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--cg-card-gap)}.color-grid__skeleton-card{aspect-ratio:3/4;background:var(--cg-skeleton-bg);border-radius:8px;animation:cg-pulse 1.5s ease-in-out infinite}@keyframes cg-pulse{0%,to{opacity:1}50%{opacity:.5}}.color-grid__content{padding:24px 20px;max-width:1400px;margin:0 auto}.color-grid__content[hidden]{display:none}.color-grid__family{margin-bottom:var(--cg-section-gap);scroll-margin-top:calc(var(--header-height, 60px) + var(--cg-nav-height) + 16px)}.color-grid__family:last-child{margin-bottom:0}.color-grid__family-title{font-size:24px;font-weight:600;margin:0 0 20px;padding-bottom:12px;border-bottom:2px solid #e5e5e5;color:#000}.color-grid__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--cg-card-min-width),1fr));gap:var(--cg-card-gap)}.color-grid__card{position:relative;background:#fff;border-radius:8px;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease}.color-grid__card:hover{box-shadow:0 4px 20px #0000001a;transform:translateY(-2px)}.color-grid__card[hidden],.color-grid__family[hidden]{display:none}.color-grid__card-link{display:block;text-decoration:none;color:inherit}.color-grid__card-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f8f8f8}.color-grid__card-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;transition:transform .3s ease}.color-grid__card:hover .color-grid__card-image{transform:scale(1.05)}.color-grid__card-image--secondary{opacity:0}.color-grid__card:hover .color-grid__card-image--secondary{opacity:1}.color-grid__card:hover .color-grid__card-image--primary{opacity:0}.color-grid__card-tags{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;z-index:2}.color-grid__card-tag{display:inline-block;padding:4px 8px;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;border-radius:4px}.color-grid__card-tag--sale{background:#cf112c;color:#fff}.color-grid__card-tag--sold-out{background:#666;color:#fff}.color-grid__card-meta{padding:12px}.color-grid__card-title{font-size:14px;font-weight:500;line-height:1.4;margin:0 0 4px;color:#000;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.color-grid__card-vendor{font-size:12px;color:#666;margin:0 0 8px}.color-grid__card-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.color-grid__card-price-current{font-size:14px;font-weight:600;color:#000}.color-grid__card-price-compare{font-size:13px;color:#999;text-decoration:line-through}.color-grid__card--salon{background:linear-gradient(135deg,#f0fff0,#fff 50%);border:1px solid rgba(46,125,50,.2)}.color-grid__card--salon .color-grid__card-price-current{color:#2e7d32}.color-grid__salon-badge{display:block;font-size:11px;color:#2e7d32;font-weight:500;margin-top:4px}.color-grid__card-atc{padding:12px;border-top:1px solid #f0f0f0}.cg-options-trigger{width:100%;padding:10px 16px;background:#000;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.cg-options-trigger:hover{background:#333}.cg-actions{position:relative}.cg-qty{display:flex;align-items:center;justify-content:center;gap:0;border:1px solid #e0e0e0;border-radius:6px;overflow:hidden}.cg-qty-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:#f5f5f5;border:none;cursor:pointer;transition:background-color .15s ease;color:#333}.cg-qty-btn:hover{background:#e0e0e0}.cg-qty-btn--plus{background:#000;color:#fff}.cg-qty-btn--plus:hover{background:#333}.cg-qty-input{width:48px;height:36px;border:none;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0;text-align:center;font-size:14px;font-weight:500;-moz-appearance:textfield;background:#fff}.cg-qty-input::-webkit-inner-spin-button,.cg-qty-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.cg-qty-input:focus{outline:none;background:#fafafa}.cg-pending-status{position:absolute;top:0;left:0;right:0;bottom:0;display:none;align-items:center;justify-content:center;background:#ffffffe6;font-size:12px;color:#666}.cg-qty.is-updating .cg-pending-status{display:flex}.color-grid__restriction{color:#cf112c;font-size:12px;margin-top:8px}.color-grid__restriction-msg{display:block}.color-grid__restriction-link{color:inherit;text-decoration:underline}.color-grid__error{text-align:center;padding:60px 20px;max-width:400px;margin:0 auto}.color-grid__error[hidden]{display:none}.color-grid__error p{font-size:16px;color:#666;margin:0 0 16px}.color-grid__retry-btn{display:inline-block;padding:10px 24px;background:#000;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.color-grid__retry-btn:hover{background:#333}.color-grid__empty{text-align:center;padding:60px 20px}.color-grid__empty[hidden]{display:none}.color-grid__empty p{font-size:16px;color:#666;margin:0}.color-grid__region-empty{text-align:center;padding:60px 20px}.color-grid__region-empty[hidden]{display:none}.color-grid__region-empty p{font-size:16px;color:#666;margin:0}.color-grid__no-results{text-align:center;padding:60px 20px;max-width:400px;margin:0 auto}.color-grid__no-results[hidden]{display:none}.color-grid__no-results p{font-size:16px;color:#666;margin:0 0 16px}.color-grid__search-term{font-weight:600;color:#000}.color-grid__clear-search{display:inline-block;padding:10px 24px;background:transparent;color:#000;border:1px solid #000;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s ease,color .2s ease}.color-grid__clear-search:hover{background:#000;color:#fff}@media (max-width: 767px){.color-grid__nav-inner{flex-wrap:wrap;gap:12px;padding:12px 16px}.color-grid__search{width:100%;order:2}.color-grid__pills{display:none}.color-grid__dropdown{display:block;flex:1;order:1}.color-grid{--cg-card-min-width: 140px;--cg-card-gap: 12px;--cg-section-gap: 32px}.color-grid__content{padding:16px}.color-grid__loading{padding:24px 16px}.color-grid__section-title{font-size:20px;margin-bottom:16px;padding-bottom:10px}.color-grid__card-meta{padding:10px}.color-grid__card-title{font-size:13px}.color-grid__card-vendor{font-size:11px;margin-bottom:6px}.color-grid__card-price-current{font-size:13px}}@keyframes cg-slide-up{0%{transform:translateY(100%)}to{transform:translateY(0)}}@media (prefers-reduced-motion: reduce){.color-grid__card,.color-grid__pill,.color-grid__search-input,.color-grid__dropdown-trigger,.color-grid__dropdown-panel,.color-grid__retry-btn,.color-grid__clear-search,.color-grid__skeleton-card{transition-duration:.01ms!important;animation-duration:.01ms!important}}
/*# sourceMappingURL=/cdn/shop/t/887/assets/color-grid.css.map */