@font-face{font-family:'Nunito Sans';src:url('fonts/nunito-sans-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url('fonts/nunito-sans-bold.woff') format('woff');font-style:normal;font-weight:600 900;font-display:swap}
:root{--brand-font:'Nunito Sans','Trebuchet MS',sans-serif}
body{font-family:var(--brand-font);font-weight:400;font-optical-sizing:auto}
h1,h2,h3,h4,h5,h6,button,input,select,textarea,.btn,nav,summary{font-family:var(--brand-font)}
h1,h2{font-weight:800}h3,h4{font-weight:750}
.hero h1,.hero .slide-heading,.flavors-hero h1{font-weight:850}
button,.btn,nav,summary{font-weight:750}
input,select,textarea{font-weight:400}
.header nav,.nav nav{font-size:14px}
.eyebrow,.flavor-label,.profile-number{font-weight:800}
.newsletter-form,.community-form,.form-grid{line-height:1.55}
@media(max-width:620px){.nav nav{font-size:11px}}
/* Level the wordmark extracted from the angled package front. */
header .packaging-brand img{transform:skewY(-1.8deg);transform-origin:center}
/* Original wordmark letters part to let the crew peek through, on mouse hover only. */
header .packaging-brand{position:relative;isolation:isolate;--logo-gap:14px}
header .packaging-brand>.logo-rest{transition:opacity .14s ease}
header .packaging-brand .logo-playful-letters{display:block;position:absolute;inset:0;opacity:0;pointer-events:none;transform:skewY(-1.8deg);transform-origin:center;transition:opacity .14s ease}
header .packaging-brand .logo-letter{display:block;position:absolute;left:var(--letter-x);top:0;width:var(--letter-w);height:100%;overflow:hidden;z-index:2;transform:translateX(0);transition:transform .36s cubic-bezier(.22,.7,.22,1)}
header .packaging-brand .logo-letter>img{position:absolute;left:calc(0px - var(--letter-x));top:0;width:154px;height:auto;max-width:none;transform:none}
header .packaging-brand .logo-peek-character{display:block;position:absolute;left:var(--peek-x);top:6px;width:30px;height:34px;z-index:1;opacity:0;transform:translate(-50%,13px) scale(.4);transform-origin:50% 100%;transition:opacity .12s ease,transform .25s ease}
header .packaging-brand .logo-peek-character>img{display:block;width:100%;height:100%;max-width:none;object-fit:contain;transform:none}
@media(hover:hover) and (pointer:fine){
 header .packaging-brand:hover>.logo-rest{opacity:0}
 header .packaging-brand:hover .logo-playful-letters{opacity:1}
 header .packaging-brand:hover .logo-letter{transform:translateX(calc(var(--letter-step) * var(--logo-gap)))}
 header .packaging-brand:hover .logo-peek-character{opacity:1;transform:translate(calc(-50% + var(--peek-step) * var(--logo-gap)),0) scale(1);transition-delay:var(--peek-delay)}
}
@media(max-width:700px){header .packaging-brand{--logo-gap:8px}}
@media(prefers-reduced-motion:reduce){header .packaging-brand>.logo-rest,header .packaging-brand .logo-playful-letters,header .packaging-brand .logo-letter,header .packaging-brand .logo-peek-character{transition:none!important}}
/* The crew peeks above the navigation labels without moving the tabs. */
header [data-nav-character]{position:relative}
header [data-nav-character]::after{content:'';position:absolute;left:50%;bottom:100%;width:30px;height:28px;background-image:var(--nav-mascot);background-size:contain;background-position:center bottom;background-repeat:no-repeat;pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,9px) scale(.45);transform-origin:50% 100%;transition:opacity .13s ease,transform .25s cubic-bezier(.2,.8,.3,1.2),visibility .13s ease;z-index:4}
header [data-nav-character="mint"]{--nav-mascot:url('mascot-mint.webp')}
header [data-nav-character="grape"]{--nav-mascot:url('mascot-grape.webp')}
header [data-nav-character="strawberry"]{--nav-mascot:url('mascot-strawberry.webp')}
header [data-nav-character="raspberry"]{--nav-mascot:url('mascot-raspberry.webp')}
header [data-nav-character="cherry"]{--nav-mascot:url('mascot-cherry.webp')}
header [data-nav-character="peach"]{--nav-mascot:url('mascot-peach.webp')}
header [data-nav-character="lemon"]{--nav-mascot:url('mascot-lemon.webp')}
header .shop-menu>[data-nav-character]::after{bottom:calc(100% - 12px)}
@media(hover:hover) and (pointer:fine){header [data-nav-character]:hover::after{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}}
header [data-nav-character]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}
@media(prefers-reduced-motion:reduce){header [data-nav-character]::after{transition:none}}