.shop-by-color-section{--sbc-pad:32px;padding:var(--sbc-pad);border-radius:var(--r-lg,var(--r-lg));background:#e9efee;transition:background-color .35s ease}.shop-by-color-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 24px;margin-bottom:28px}.shop-by-color-kicker{margin-bottom:6px;font-size:var(--fs-sm);color:#757575}.shop-by-color-title{margin:0;font-size:var(--fs-2xl)}.shop-by-color-filters{display:flex;flex-wrap:wrap;gap:10px}.shop-color-chip{display:inline-flex;align-items:center;gap:8px;height:var(--h-pill);padding:0 16px 0 10px;border:1px solid #fff0;border-radius:var(--r-pill);background:var(--surface);color:#221b3e;font-size:var(--fs-sm);cursor:pointer;transition:border-color .15s,background .15s}.shop-color-chip:hover{border-color:#221b3e}.shop-color-chip.is-active{border-color:#221b3e}.shop-color-chip-dot{width:24px;height:24px;border-radius:50%;box-shadow:var(--swatch-edge)}.shop-by-color-panel{display:none}.shop-by-color-panel.is-active{display:grid;grid-template-columns:repeat(var(--sbc-n,6),minmax(0,1fr));gap:16px;align-items:stretch}.shop-by-color-grid{display:contents}.shop-by-color-grid>li{min-width:0}.shop-by-color-all{margin-bottom:0}@media (min-width:960px) and (max-width:1199px){.shop-by-color-panel.is-active{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (max-width:959px){.shop-by-color-section{--sbc-pad:16px}.shop-by-color-grid{display:flex;gap:16px;margin:-16px 0 -24px calc(var(--sbc-pad) * -1);padding:16px 12px 40px var(--sbc-pad);scroll-padding-inline:var(--sbc-pad);list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none}.shop-by-color-grid::-webkit-scrollbar{display:none}.shop-by-color-grid>li{flex:0 0 298px;scroll-snap-align:start}.shop-by-color-panel.is-active{display:block}.shop-by-color-grid{margin-right:calc(var(--sbc-pad) * -1);padding-right:var(--sbc-pad)}.shop-by-color-all{margin:4px 0 0}.shop-by-color-all__link{flex-direction:row;align-items:center;min-height:0;padding:16px 20px}.shop-by-color-all__link::before{right:-30px;bottom:-70px}.shop-by-color-filters{flex-wrap:nowrap;width:auto;margin-inline:calc(var(--sbc-pad) * -1);padding-inline:var(--sbc-pad);scroll-padding-inline:var(--sbc-pad);overflow-x:auto;scrollbar-width:none}.shop-color-chip{flex:none}.shop-by-color-grid>li{flex-basis:187px}}.shop-by-color-section .nsf-card__dots{display:none}.shop-by-color-all{display:flex;margin-bottom:16px}.shop-by-color-all__link{--on:#fff;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:24px;width:100%;min-height:280px;padding:24px;border-radius:var(--r-md);background:var(--c);color:var(--on);text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .25s var(--ease)}.shop-by-color-all__link.is-light{--on:#221b3e}.shop-by-color-all__link::before{content:"";position:absolute;z-index:-1;right:-40px;bottom:-40px;width:180px;height:180px;border-radius:50%;background:var(--on);opacity:.1;transition:transform .5s var(--ease)}.shop-by-color-all__kicker{font-size:var(--fs-sm);opacity:.8}.shop-by-color-all__title{display:block;margin:8px 0 0;font-size:var(--fs-xl);line-height:1.2}.shop-by-color-all__arrow{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--on);color:var(--c);transition:transform .3s var(--ease)}.shop-by-color-all__arrow svg{width:20px;height:20px}.shop-by-color-all__link:hover{box-shadow:var(--shadow)}.shop-by-color-all__link:hover::before{transform:scale(1.4)}.shop-by-color-all__link:hover .shop-by-color-all__arrow{transform:translateX(4px)}.shop-by-color-all__link:focus-visible{outline:2px solid var(--on);outline-offset:-6px}@media (prefers-reduced-motion:reduce){.shop-by-color-all__link,.shop-by-color-all__link::before,.shop-by-color-all__arrow{transition:none}}@media (max-width:639px){.home-colors{width:100%}.home-colors .shop-by-color-section,.shop-by-color-section{border-radius:0}}@media (max-width:959px){.shop-by-color-panel.is-active{display:block}.shop-by-color-all{margin:4px 0 0}.shop-by-color-all__link{flex-direction:row;align-items:center;justify-content:space-between;min-height:0;padding:16px 20px}.shop-by-color-all__link::before{right:-30px;bottom:-80px}.shop-by-color-all__arrow{flex:none;width:40px;height:40px}}.shop-by-color-all.has-set{display:grid;grid-template-rows:1fr 1fr;gap:8px}.shop-by-color-all.has-set .shop-by-color-all__link{min-height:0;padding:18px 20px}.shop-by-color-all__link--set{background-image:linear-gradient(rgb(0 0 0 / .18),rgb(0 0 0 / .18))}.shop-by-color-all__link--set.is-light{background-image:linear-gradient(rgb(0 0 0 / .08),rgb(0 0 0 / .08))}.shop-by-color-all.has-set .shop-by-color-all__title{font-size:var(--fs-lg)}.shop-by-color-all__tag{position:absolute;z-index:1;top:14px;right:14px;margin:0;padding:0 8px;border-radius:var(--r-pill);background:var(--on);color:var(--c);font-size:10px;font-style:normal;letter-spacing:.08em;line-height:18px;vertical-align:1px}@media (max-width:959px){.shop-by-color-all.has-set{grid-template-rows:none;grid-template-columns:1fr}.shop-by-color-all.has-set .shop-by-color-all__link{padding:14px 20px}.shop-by-color-all__tag{position:static;margin-left:8px}}.shop-by-color-all__link::before{display:none}.shop-by-color-all,.shop-by-color-all.has-set{margin-bottom:0}@media (min-width:960px){.shop-by-color-all{align-self:stretch}}.shop-by-color-all__link--set{background:color-mix(in srgb,var(--c) 7%,transparent);background-image:none;border:0;color:var(--brand)}.shop-by-color-all__link--set.is-light{background-image:none}.shop-by-color-all__link--set .shop-by-color-all__kicker{color:var(--muted);opacity:1}.shop-by-color-all__link--set .shop-by-color-all__arrow{background:var(--c);color:#fff}.shop-by-color-all__link--set.is-light .shop-by-color-all__arrow{background:var(--brand);color:#fff}.shop-by-color-all__link--set .shop-by-color-all__tag{background:var(--c);color:#fff}.shop-by-color-all__link--set.is-light .shop-by-color-all__tag{background:var(--brand);color:#fff}.shop-by-color-all__link--set:hover{box-shadow:none;background:color-mix(in srgb,var(--c) 13%,transparent)}.shop-by-color-all.has-set .shop-by-color-all__link{justify-content:space-between;gap:8px;padding:16px 18px}.shop-by-color-all__body{display:grid;gap:2px;min-width:0}.shop-by-color-all__kicker{font-size:var(--fs-xs);line-height:16px}.shop-by-color-all__desc{margin-top:4px;font-size:var(--fs-xs);line-height:16px;color:var(--muted)}.shop-by-color-all__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto}.shop-by-color-all__foot>.shop-by-color-all__arrow{margin-left:auto}.shop-by-color-all__arrow{width:34px;height:34px}.shop-by-color-all__arrow svg{width:16px;height:16px}.shop-by-color-all__tag,.shop-by-color-all__link--set .shop-by-color-all__tag{position:static;margin:0;padding:0 9px;line-height:20px}@media (max-width:959px){.shop-by-color-all.has-set .shop-by-color-all__link{flex-direction:row;align-items:center;padding:14px 16px}.shop-by-color-all__foot{margin-top:0;margin-left:auto;flex:none}.shop-by-color-all__arrow{width:32px;height:32px}.shop-by-color-all__desc{display:none}.shop-by-color-all__link--set .shop-by-color-all__tag{display:none}}.shop-by-color-all.has-set .shop-by-color-all__link--set{padding:16px 18px}@media (max-width:959px){.shop-by-color-all.has-set .shop-by-color-all__link--set{padding:12px 14px}}.shop-by-color-all__link--set .shop-by-color-all__title{margin-top:0}@media (max-width:639px){.shop-by-color-grid{gap:12px}}