.color-nav{--cn-color-dark: #18171C;--cn-circle-bg: #FFFFFF;--cn-cols-mobile: 3;--cn-cols-desktop: 6;--cn-gap-mobile: 8px;--cn-gap-desktop: 24px}.color-nav{margin:0;padding:0}.color-nav__container{display:flex;flex-direction:column;gap:24px;padding-block:32px}@media(min-width:750px){.color-nav__container{gap:48px;padding-block:72px}}.color-nav__heading{margin:0;font-family:var(--font-heading--family, "Gilda Display", serif);font-size:2.1875rem;font-weight:400;line-height:1.2;color:var(--color-foreground, var(--cn-color-dark));text-align:center}@media(min-width:750px){.color-nav__heading{font-size:3.4375rem;line-height:1.1}}.color-nav__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cn-cols-mobile),1fr);gap:24px var(--cn-gap-mobile)}@media(min-width:750px){.color-nav__grid{grid-template-columns:repeat(var(--cn-cols-desktop),1fr);gap:var(--cn-gap-desktop)}}.color-nav__link{display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}@media(min-width:750px){.color-nav__link{gap:24px}}.color-nav__circle{width:100%;aspect-ratio:1 / 1;border-radius:var(--oc-radius-pill, 999px);background-color:var(--cn-circle-bg);overflow:hidden;position:relative;flex-shrink:0;box-shadow:0 0 0 0 transparent;transition:transform var(--oc-transition-base, .25s ease-out),box-shadow var(--oc-transition-base, .25s ease-out)}.color-nav__link:hover .color-nav__circle,.color-nav__link:focus-visible .color-nav__circle{transform:scale(1.04);box-shadow:0 0 0 3px var(--color-primary)}.color-nav__image{display:block;width:100%;height:100%;object-fit:cover;object-position:center;position:absolute;top:0;right:0;bottom:0;left:0}.color-nav__image-placeholder{width:100%;height:100%;background-color:var(--cn-circle-bg)}.color-nav__label{display:block;width:100%;font-family:var(--font-heading--family, "Gilda Display", serif);font-size:1.125rem;font-weight:400;line-height:1.1;color:var(--color-foreground, var(--cn-color-dark));text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color var(--oc-transition-base, .25s ease-out)}.color-nav__link:hover .color-nav__label,.color-nav__link:focus-visible .color-nav__label{color:var(--color-primary)}@media(min-width:750px){.color-nav__label{font-size:1.5rem}}.color-nav__link:focus-visible{outline:2px solid var(--color-foreground, var(--cn-color-dark));outline-offset:4px;border-radius:4px}@media(prefers-reduced-motion:reduce){.color-nav__circle,.color-nav__label{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/43/assets/section-color-navigation.css.map */