#fw-section-header {

/* GoudaJokes: Fourthwall header, paste into Site design > Layout > Header > Add custom CSS code.
   Matches goudajokes.com: white bar (the logo file has a white background), cheese-yellow underline, rounded pill links.
   Colours: yellow #F2A81D, soft yellow #FFE9B0, cream-2 #FBEFD0, ink #2E2E30, brown #6B4226. Fonts follow Style > Fonts (Nunito). */
.header{
  background-color:#fff !important;
  border:0 !important;
  border-bottom:3px solid #F2A81D !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  font-family:var(--font-family-base),Nunito,"Trebuchet MS",system-ui,sans-serif;
}
.header__grid{min-height:72px}
.header__logo-image{max-height:64px}

/* nav links: pills like the site menu */
.header__nav .header__list{gap:2px}
.header__link{
  color:#2E2E30;
  font-weight:800;
  font-size:.95rem;
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  transition:background-color .15s,color .15s;
}
.header__link:hover,.header__link:focus-visible{background-color:#FFE9B0;color:#2E2E30}
.header__link:focus-visible,.header__icon:focus-visible{outline:3px solid #2E2E30;outline-offset:2px}

/* first menu item ("Back to GoudaJokes.com") reads as a real button */
.header__nav .header__list-item:first-child .header__link{background-color:#FBEFD0;color:#6B4226;box-shadow:inset 0 0 0 2px #F2A81D}
.header__nav .header__list-item:first-child .header__link:hover,
.header__nav .header__list-item:first-child .header__link:focus-visible{background-color:#FFE9B0;color:#2E2E30}

/* cart, currency and menu icons */
.header__icons .header__link{padding:8px 12px}
.header__icon,.header__icon svg,.header__link--icon{color:#2E2E30}
.header__icon:hover,.header__link--icon:hover{color:#B96F00}

@media (prefers-reduced-motion:reduce){.header__link{transition:none}}

}