.visual-nav{--vn-count: 5;--vn-gap: 8px;--vn-item-w: min(155px, calc((100% - 2 * var(--vn-gap)) / 3));--vn-item-ratio: 109 / 102;--vn-label-h: 48px;--vn-label-size: 12px;--vn-label-lh: 16px;--vn-image-w: 56px;--vn-image-centre: 35.1%;width:100%;background:#fff;margin-bottom:24px}@media(min-width:768px){.visual-nav{--vn-gap: 16px;--vn-item-w: min( 257.6px, calc((100% - (var(--vn-count) - 1) * var(--vn-gap)) / var(--vn-count)) );--vn-item-ratio: 257.6 / 293.6;--vn-label-h: clamp(48px, 8.33vw, 120px);--vn-label-size: clamp(14px, 1.39vw, 20px);--vn-label-lh: 1.2;--vn-image-w: 69.9%;--vn-image-centre: 48.6%;margin-bottom:60px}}@media(min-width:768px){.visual-nav.is-condensed{--vn-item-w: min( 180px, calc((100% - (var(--vn-count) - 1) * var(--vn-gap)) / var(--vn-count)) );--vn-item-ratio: 180 / 130;--vn-label-h: 48px;--vn-label-size: 14px;--vn-label-lh: 16px;--vn-image-w: 47.9%;--vn-image-centre: 26.6%}}.visual-nav.is-fixed{position:fixed;left:0;width:100vw;box-shadow:0 4px 12px #0000000f;margin-bottom:0;z-index:10}.visual-nav__container{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--vn-gap);width:100%;margin:0 auto;padding:0 7.5px;list-style:none}.visual-nav__list-item{display:contents}.visual-nav.is-fixed .visual-nav__container{padding:16px calc(16px + var(--container-padding, 16px))}@media(min-width:768px){.visual-nav__container{flex-wrap:nowrap;max-width:1440px;padding:0}.visual-nav.is-fixed .visual-nav__container{padding:16px 20px}}.visual-nav__item{position:relative;display:block;flex:0 0 auto;width:var(--vn-item-w);aspect-ratio:var(--vn-item-ratio);background:var(--vn-bg, #fbf7f1);color:#502c1e;overflow:visible;text-align:center;cursor:pointer;transition:width .25s ease,aspect-ratio .25s ease}.visual-nav__item.active{outline:1px solid #ffa300;outline-offset:-1px}.visual-nav__image{display:block;width:var(--vn-image-w);height:auto;aspect-ratio:1;margin:calc(var(--vn-image-centre) - var(--vn-image-w) / 2) auto 0;object-fit:contain;transition:width .25s ease,margin-top .25s ease}.visual-nav__badge{position:absolute;color:var(--color-text);background:var(--color-bg);top:0;left:8px;padding:2px 3px;transform:translateY(-35%);font-family:Filson Pro Bold,sans-serif;border-radius:4px;font-size:8px;font-weight:500;line-height:normal;letter-spacing:-.192px}@media(min-width:768px){.visual-nav__badge{font-size:12px}}.visual-nav__title{position:absolute;inset:auto 0 0;display:flex;align-items:center;justify-content:center;height:var(--vn-label-h);margin:0;padding-inline:8px;font-family:Filson Pro Bold,sans-serif;font-size:var(--vn-label-size);line-height:var(--vn-label-lh);letter-spacing:-.192px;text-wrap:balance;transition:height .25s ease,font-size .25s ease}@media(prefers-reduced-motion:reduce){.visual-nav__item,.visual-nav__image,.visual-nav__title{transition:none}}.visual-nav.is-measuring,.visual-nav.is-measuring *{transition:none!important}
/*# sourceMappingURL=/cdn/shop/t/213/assets/collection-visual-nav.css.map */