.snippet-navigation-brand{display:grid;width:100%;position:fixed;background:var(--colour-primary);transition:all var(--transition-duration) var(--transition-timing)}.snippet-navigation-brand .brand-wrapper{display:grid;grid-template-areas:"header" "menu" "alphabet" "brands";grid-template-columns:100%;overflow-y:scroll;scroll-behavior:smooth}.snippet-navigation-brand.is-active{transform:none}.snippet-navigation-brand .inner-header{grid-area:header;padding:2rem 1rem .5rem;display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.snippet-navigation-brand .inner-header *{margin:0}.snippet-navigation-brand ul{list-style:none;margin:0;padding:0;padding:0 1rem}.snippet-navigation-brand ul a{text-decoration:none}.snippet-navigation-brand .alphabet{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:auto;gap:.5rem;margin-bottom:1.5rem;grid-area:alphabet}.snippet-navigation-brand .alphabet li{flex-grow:1}.snippet-navigation-brand .alphabet li button{font-size:.875rem;font-family:var(--font-family-base);font-weight:400;letter-spacing:.025em;text-transform:uppercase;font-weight:500;padding:0;height:auto;width:100%}.snippet-navigation-brand .brands{display:grid;grid-auto-flow:row;gap:.75rem;grid-area:brands}.snippet-navigation-brand .brands li.letter{font-size:1rem;font-family:var(--font-family-base);font-weight:400;letter-spacing:.025em;text-transform:uppercase}.snippet-navigation-brand .brands li.letter:not(:first-of-type){padding-top:1rem}.snippet-navigation-brand .brands li:hover a,.snippet-navigation-brand .brands li:focus a{text-decoration:underline}.snippet-navigation-brand .brands-nav{margin-bottom:2rem;grid-area:menu}.snippet-navigation-brand .brands-nav ul{display:grid;grid-auto-flow:row;gap:.75rem}.snippet-navigation-brand .brands-nav>ul>li>a{font-size:.875rem;font-family:var(--font-family-base);font-weight:400;letter-spacing:.025em;text-transform:uppercase;font-weight:500}.snippet-navigation-brand .brands-nav>ul ul{padding:1rem 0 0}.snippet-navigation-brand .brands-nav>ul .brand-tier-2.is-active{transform:none}.snippet-navigation-brand .brands-top{opacity:0;visibility:hidden;position:fixed;right:1rem;bottom:1rem;height:2rem;width:2rem;display:grid;place-content:center;border-radius:100%;background-color:var(--colour-primary);color:var(--colour-tertiary);transition:opacity var(--transition-duration) var(--transition-timing);z-index:5}.snippet-navigation-brand .brands-top.is-visible{opacity:1;visibility:visible}.snippet-navigation-brand .brands-top svg{height:1rem;width:1rem;fill:currentColor}@media (min-width: 1024px){.snippet-navigation-brand{position:absolute;top:1.5rem;border-top:1.5rem solid var(--colour-primary);border-bottom-left-radius:1.5rem;border-bottom-right-radius:1.5rem;opacity:0;visibility:hidden;transform:translateY(1rem);transition-delay:0}.snippet-navigation-brand .brand-wrapper{grid-template-columns:1fr 22%;grid-template-areas:"alphabet alphabet" "brands menu";align-content:start;max-height:64vh;padding:0 2rem 1.5rem}.snippet-navigation-brand.is-active{opacity:1;visibility:visible;transform:translate(0);transition-delay:.35s}.snippet-navigation-brand .inner-header{display:none}.snippet-navigation-brand .alphabet{grid-template-columns:auto;grid-auto-flow:column;position:sticky;top:0;background-color:var(--colour-primary);padding:1.5rem 0 0;margin-bottom:2rem;display:flex;align-items:center;justify-content:space-between}.snippet-navigation-brand .alphabet li button{aspect-ratio:1;background-color:transparent;transition:all var(--transition-duration) var(--transition-timing);border-radius:100%}.snippet-navigation-brand .alphabet li:hover button,.snippet-navigation-brand .alphabet li:focus button{background-color:var(--colour-white)}.snippet-navigation-brand .brands{grid-template-columns:repeat(3,1fr);gap:.5rem 1rem}.snippet-navigation-brand .brands li.letter{grid-column:1/span 3;scroll-margin-top:4rem}.snippet-navigation-brand .brands li a{font-size:.875rem}.snippet-navigation-brand .brands-nav{align-self:start;position:sticky;top:5.5rem}.snippet-navigation-brand .brands-nav>ul{gap:1.5rem;padding:1rem;border-radius:1rem;background-color:#ffffff80}.snippet-navigation-brand .brands-nav>ul .brand-tier-2{gap:.5rem}.snippet-navigation-brand .brands-nav>ul .brand-tier-2 h4{display:none}.snippet-navigation-brand .brands-nav>ul .brand-tier-2 ul{padding-top:.5rem}.snippet-navigation-brand .brands-nav>ul .brand-tier-2 ul li a{font-size:.875rem}.snippet-navigation-brand .brands-top{position:sticky;right:0;bottom:0;grid-column:2;justify-self:end}}@media (max-height: 1100px){.snippet-navigation-brand .brands-nav{position:relative;top:auto}}@media (max-width: 1023.98px){.snippet-navigation-brand{height:calc(100% - 3rem);top:3rem;left:0;transform:translate(100%);border-top:1px solid var(--colour-white);z-index:5}.snippet-navigation-brand .alphabet li button{text-align:start}.snippet-navigation-brand .brands{padding-bottom:1rem}.snippet-navigation-brand .brands-nav>ul{padding-bottom:1rem}.snippet-navigation-brand .brands-nav>ul .brand-tier-2{position:fixed;background:var(--colour-primary);transition:all var(--transition-duration) var(--transition-timing);width:100%;height:calc(100% - 3rem);top:3rem;left:0;transform:translate(100%);border-top:1px solid var(--colour-white);z-index:10;padding:2rem 1rem}}
/*# sourceMappingURL=/cdn/shop/t/469/assets/snippet-navigation-brand.css.map */