/* Selected wordmark: rounded Fredoka with a lollipop o. */
.brand{gap:12px}
.brand-mark{width:34px;height:57px;flex-shrink:0;stroke-width:2}
.wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font:550 35px/1 'Fredoka',var(--sans);letter-spacing:-.025em;white-space:nowrap}
.brand-name{display:block;color:var(--cocoa);letter-spacing:-.025em;white-space:nowrap}
.brand-fruit{color:#65733c}
.brand-pops{display:inline-block;color:#bc5145}
.brand-lollipop{display:inline-block;width:.66em;height:1.08em;vertical-align:-.29em;overflow:visible;margin:0 .015em}
.brand-subtitle{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:5px 10px;background:var(--yellow);border-radius:5px 10px 10px 5px;font:700 11px/1 var(--sans);letter-spacing:.11em;text-align:left}
.footer-wordmark{font-family:'Fredoka',var(--sans);font-weight:550;letter-spacing:-.035em;font-size:clamp(48px,9.6vw,140px)}
.footer-wordmark>.brand-name{font:inherit;display:block;padding:0;letter-spacing:inherit}
@media(max-width:1100px) and (min-width:761px){
  .site-header nav{gap:18px;font-size:12px}
  .wordmark{font-size:28px}
}
@media(max-width:760px){
  .site-header{height:102px}
  .brand{gap:7px}
  .brand-mark{width:29px;height:48px}
  .wordmark{font-size:clamp(20px,5.2vw,32px)}
  .brand-subtitle{font-size:10px;padding:4px 8px}
  .menu-toggle{gap:8px;padding:8px 11px}
  .footer-wordmark{font-size:9.6vw}
}
@media(max-width:360px){
  .site-header{width:calc(100% - 28px)}
  .menu-toggle{font-size:11px;padding:8px}
  .wordmark{font-size:20px}
}

.hero .product-name{font-size:13px;letter-spacing:.12em}
.product-name [lang]{font-size:15px;letter-spacing:.12em;margin-left:8px}