.announcement-bar__group .announcement-bar__group-item {
  word-break: normal;
}

.announcement-bar__group-item .announcement-bar__group-item-inner .rte {
  font-family: var(--bw-font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
}

@media (max-width: 959px) {
  .announcement-bar__group-item .announcement-bar__group-item-inner .rte {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: normal;
  }
}

header.header-section.transparent {
  background: none;
}

header.header-section.transparent::after {
  display: none;
}

header.header-section.transparent,
header.header-section.transparent:hover,
.theme-sticky-header--sticky header.header-section.transparent {
  --header-transparent-color-text: 252, 252, 250;
}

/* header.css hands the nav back to --header-color-text (the ink scheme colour) on
   :hover and while stuck; both selectors are 0-3-1, so the cream token only reaches
   every state from a longer selector that still resolves the token. */
theme-sticky-header .header-section.transparent .header-nav__menu-item > a,
theme-sticky-header .header-section.transparent .header-nav__menu-item > a:hover,
.header-section.transparent .header-nav__menu-item > a,
.header-section.transparent .header-nav__menu-item > a:hover {
  color: rgb(var(--header-transparent-color-text, 252, 252, 250));
}

header.header-section.transparent .header-action-bar .button--icon,
header.header-section.transparent .header-action-bar .dropdown-menu__label {
  color: rgb(var(--header-transparent-color-text, 252, 252, 250));
}

theme-sticky-header .header-section.transparent .header__logo-link {
  color: rgb(var(--header-transparent-color-text, 252, 252, 250));
}

.header-section .header__container,
.theme-sticky-header--sticky .header-section.transparent .header__container {
  background-color: transparent;
}

/* The container above is transparent so the glass pill reads the page behind it; that leaves the
   opaque header with no ground of its own. The inner-page mock draws a solid cream bar, so the
   header owns that ground rather than borrowing the body's. The stuck state takes it back off
   further down, because the pill has to float over the page it pins above. */
header.header-section:not(.transparent) {
  background-color: var(--bw-cream, #fcfcfa);
}

.header-section .header__container-top {
  padding-block: 17px;
}

/* The pill is 1785 wide centred at 1920 and keeps the same 60px gutter below that width, so it
   never reaches the viewport edge on a laptop. Height is set per state: 80 in every pill state
   (hero 1:22175 and the stuck bar), 54 inside the 88px inner-page bar 1:14574. */
.header-section .header__container-top-wrap.page-width {
  max-width: min(1785px, calc(100% - 120px));
  height: 80px;
  padding-block: 0;
  padding-inline: 36px;
  align-items: center;
}

/* Glass sits on ::before, not on the wrap: the wrap is the containing block for the
   absolutely-positioned mega-menu panels, and backdrop-filter + border-radius clips them. */
.header-section .header__container-top-wrap.page-width::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background: rgba(169, 173, 165, 0.35);
  border: 2px solid var(--bw-ink, #06402d);
  border-radius: var(--bw-radius-nav);
  backdrop-filter: blur(var(--bw-glass-nav-blur));
  -webkit-backdrop-filter: blur(var(--bw-glass-nav-blur));
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .header-section .header__container-top-wrap.page-width::before {
    background: rgba(86, 96, 82, 0.92);
  }
}

.header-section .header-nav__menu-item > a,
.header-section .header-action-bar .button--icon {
  color: var(--bw-cream, #fcfcfa);
}

/* Beats .transparent:not(:hover) .header__logo-link (0-3-0), whose
   rgb(var(--header-transparent-color-text)) resolves to nothing while the setting is unset.
   The wordmark paths are currentColor, so this rule is what colours the mark. */
.header-section .header__logo .header__logo-wrapper .header__logo-link {
  color: var(--bw-cream, #fcfcfa);
}

/* The client's own logo files (2026-09-16): the white one-line lockup wherever the glass pill is
   (the home hero at rest and the stuck state on every page), the green one on the inner pages'
   cream bar. Both are in the markup; the header state picks which one shows. */
.header-section .header__logo .header__logo-mark {
  display: block;
  width: var(--desktop-size, 260px);
  height: auto;
  color: inherit;
}

.header-section .header__logo .header__logo-mark--bar {
  display: none;
}

.header-section:not(.transparent) .header__logo .header__logo-mark--pill {
  display: none;
}

.header-section:not(.transparent) .header__logo .header__logo-mark--bar {
  display: block;
}

.theme-sticky-header--sticky header.header-section:not(.transparent) .header__logo .header__logo-mark--pill {
  display: block;
}

.theme-sticky-header--sticky header.header-section:not(.transparent) .header__logo .header__logo-mark--bar {
  display: none;
}

/* With no logo image on either variant the theme still swaps the text logo out for the
   empty transparent one; both rules stop matching as soon as a logo image is uploaded. */
.header-section
  .header__logo-wrapper:not(:has(.header__logo-image))
  .header__logo-link.transparent {
  display: none;
}

.header-section.transparent:not(:hover)
  .header__logo-wrapper:not(:has(.header__logo-image))
  .header__logo-link {
  visibility: visible;
}

.header-section .header-nav__underline::after {
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--bw-dur-brisk) var(--bw-ease-standard);
}

.header-section .header-nav__underline:hover::after,
.header-section .header-nav__underline-control:hover > .header-nav__underline::after,
.header-section .header-nav__underline-scope:hover > .header-nav__underline-control > .header-nav__underline::after,
.header-section .bw-nav-fallback-item.bw-nav-open > .header-nav__underline::after {
  width: 100%;
  transform: scaleX(1);
}

@media (min-width: 960px) {
  .header-section .header-nav__menu-item > a {
    font-family: var(--bw-font-body);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: normal;
  }

  /* The empty action-bar-left track puts one of the grid's 24px gaps in front of the nav, which
     lands "Shop" 24px right of the 36px inset both mocks draw. Pulling the nav back by exactly one
     gap costs the flexible track nothing and leaves the logo's own centring untouched. */
  .header-section
    .header__container[layout="center_logo_left_menu"]
    .header__container-top-wrap
    .header-nav {
    margin-inline-start: calc(var(--header-column-gap) * -1);
  }

  /* 40px between items (20 + 20; the first item's start margin is zeroed below) and a row that is
     exactly the 54px the inner bar's grid track is allowed to be: 11 + a 32px line + 11. The stock
     26px min-height would otherwise keep the track at its own idea of a nav row. */
  .header-section .header-nav__menu-item {
    --nav-menu-item-padding-block: 11px;

    min-height: 0;
    margin-inline: 20px;
  }

  /* The stock link is a column flex so its hover underline can sit under the label as a flow item.
     The chevron has to stand beside the label, so the top-level link becomes a row and the
     underline is lifted out of the flow onto the link's own bottom edge. Only the header's own
     menu items are re-laid out; the dropdown panels keep the stock column link. */
  .header-section .header-nav__menu-item > a.header-nav__underline {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: auto;
    white-space: nowrap;
  }

  .header-section .header-nav__menu-item > a.header-nav__underline::after {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
  }

  /* The chevron is a span inside the link, so the stock rule that pads every such span by the nav
     row's block padding would make a 10px icon 34px tall and wrap it onto its own line. */
  .header-section .header-nav__menu-item > a > .bw-nav-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    padding: 0;
    margin-inline-start: 4px;
  }

  .header-section .bw-nav-chevron svg {
    width: 10px;
    height: 10px;
  }

  /* The four-column grid keeps a track for the action bar that this layout leaves empty, so two of
     the three 24px gaps fall left of the logo and one right: the auto-sized logo track lands half a
     gap right of centre at every width. Cancelling one gap on the logo puts the mark on the page's
     centre line, and the two 1fr tracks absorb the 12px each without moving their own content. */
  .header-section
    .header__container[layout="center_logo_left_menu"]
    .header__container-top-wrap
    .header__logo {
    margin-inline-start: calc(var(--header-column-gap) * -1);
  }

  .header-section .header-nav__menu .header-nav__menu-item:first-child {
    margin-inline-start: 0;
  }

  .header-section .header-action-bar {
    column-gap: 20px;
  }
}

@media (max-width: 959px) {
  .header-section .header__container-top {
    padding-block: 16px;
  }

  /* Hero-mb 1:22342: a 358x48 pill inset 16px, 16px of room left of the logo and 8px right of
     the last icon, with the icon cluster on the trailing edge in search / cart / burger order. */
  .header-section .header__container-top-wrap.page-width {
    max-width: calc(100% - 32px);
    height: 48px;
    padding-inline: 16px 8px;
  }

  .header-section .header__container[mobile-layout] .header__container-top-wrap.page-width {
    grid-template: "logo action-bar-right action-bar-left";
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 12px;
  }

  .header-section .header__container[mobile-layout] .header__container-top-wrap .header__logo {
    justify-content: flex-start;
  }

  .header-section .header__container[mobile-layout] .header__container-top-wrap .header-action-bar {
    flex: 0 0 auto;
    column-gap: 12px;
    margin-inline: 0;
  }

  .header-section .header-action-bar.right .header-action-bar__search {
    order: -1;
  }

  .header-section .header-action-bar .button--icon {
    width: 32px;
    height: 32px;
  }

  /* The cart entry is a wrapper div around theme-cart-bubble, so the foundation's icon hit layer
     (a/button only) cannot reach it; the bubble itself carries role="button" in drawer mode.
     The :not(:has(a)) guard matters: in page mode the bubble wraps its own link, and a hit layer
     over it would swallow the tap it exists to deliver. */
  .header-section .header-action-bar .button--icon .cart-bubble:not(:has(a)) {
    position: relative;
  }

  .header-section .header-action-bar .button--icon .cart-bubble:not(:has(a))::before {
    position: absolute;
    inset: min(0px, calc((44px - 100%) / -2));
    content: "";
  }

  .header-section .header__logo .header__logo-mark {
    width: var(--mobile-size, 97px);
  }

  /* The drawer's own menu rows already stand at 44; its dismiss control and the log-in row ship
     at 28 and are the two things a thumb reaches for first. */
  .header-nav-drawer a.header-nav-drawer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .header-nav-drawer a.header-nav-drawer__icon,
  .header-nav-drawer .header-nav-drawer__login {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Inner-page bar 1:14574 — a full-bleed cream bar 88 tall (17px of container padding above and
   below a 54px row), nav at the 50px inset, icons on a 52px pitch ending 29px from the edge, and
   no pill: the glass belongs to the hero and to the stuck state. */
.header-section:not(.transparent) .header__container-top-wrap.page-width {
  max-width: 100%;
  height: 54px;
  padding-inline: 50px 29px;
}

.header-section:not(.transparent) .header__container-top-wrap.page-width::before {
  content: none;
}

.header-section:not(.transparent) .header-nav__menu-item > a,
.header-section:not(.transparent) .header-action-bar .button--icon,
.header-section:not(.transparent) .header__logo .header__logo-wrapper .header__logo-link {
  color: var(--bw-ink, #06402d);
}

.header-section:not(.transparent) .header-action-bar {
  column-gap: 24px;
}

/* The panels are 100% of the header row, and that row is full-bleed on the inner bar. Holding
   them to the pill's own width keeps one panel geometry across all three header states. */
.header-section:not(.transparent) .header-nav__menu-item > .header-nav-dropdown-panel {
  inset-inline: 0;
  width: min(1785px, calc(100% - 120px));
  margin-inline: auto;
}

/* Stuck state, every page (D-A39). The theme pins theme-sticky-header at
   --theme-sticky-header-top; the 17px the mock puts between the pill and the viewport edge is the
   container's own padding, so the offset needs no extra rule. The row grows 54 -> 80 while the
   header's footprint stays 88, which is what the negative block-end margin buys: the pill floats
   over the page instead of pushing it. */
.theme-sticky-header--sticky header.header-section.transparent,
.theme-sticky-header--sticky header.header-section:not(.transparent) {
  background-color: transparent;
}

/* header.css hands the transparent header back to position:relative while stuck. On the home it
   is absolute over the hero, so relative would drop a 114px box into the flow and shove the hero
   down at the moment the pill pins. */
.theme-sticky-header--sticky header.header-section.transparent {
  position: absolute;
}

.theme-sticky-header--sticky header.header-section .header__container-top-wrap.page-width {
  max-width: min(1785px, calc(100% - 120px));
  height: 80px;
  padding-inline: 36px;
  margin-block-end: -26px;
}

.theme-sticky-header--sticky header.header-section .header__container-top-wrap.page-width::before {
  content: "";
  background: rgba(6, 64, 45, 0.82);
}

.theme-sticky-header--sticky header.header-section.transparent .header-nav__menu-item > a,
.theme-sticky-header--sticky header.header-section:not(.transparent) .header-nav__menu-item > a,
.theme-sticky-header--sticky header.header-section .header-action-bar .button--icon,
.theme-sticky-header--sticky header.header-section .header__logo .header__logo-wrapper .header__logo-link {
  color: var(--bw-cream, #fcfcfa);
}

.theme-sticky-header--sticky header.header-section .header-action-bar {
  column-gap: 20px;
}

.theme-sticky-header--sticky header.header-section .header-nav__menu-item > .header-nav-dropdown-panel {
  width: 100%;
  margin-inline: 0;
}

@media (max-width: 959px) {
  .header-section:not(.transparent) .header__container-top-wrap.page-width,
  .theme-sticky-header--sticky header.header-section .header__container-top-wrap.page-width {
    max-width: calc(100% - 32px);
    height: 48px;
    padding-inline: 16px 8px;
    margin-block-end: 0;
  }

  .header-section:not(.transparent) .header-action-bar,
  .theme-sticky-header--sticky header.header-section .header-action-bar {
    column-gap: 12px;
  }
}

.header-section .bw-nav-fallback-panel {
  padding-block-start: 14px;
}

.header-section .bw-nav-fallback-panel .header-nav-dropdown-menu {
  width: max-content;
}

.header-section .bw-nav-fallback-panel .header-nav-dropdown-menu__menu {
  min-width: 248px;
  padding-block: 14px;
  border-radius: var(--bw-radius-card);
  box-shadow: 0 18px 40px -18px rgba(6, 64, 45, 0.28);
}

.header-section .bw-nav-fallback-panel .header-nav-dropdown-menu__hero {
  min-width: 200px;
  padding: 8px 24px;
  font-family: var(--bw-font-body);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: normal;
}

@media (max-width: 959px) {
  .header-nav-drawer .bw-nav-fallback-item .header-nav-drawer__menu-control {
    font-family: var(--bw-font-body);
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: normal;
  }

  .header-nav-drawer .bw-nav-fallback-item .header-nav-drawer__submenu .header-nav-drawer__menu-control {
    font-size: 16px;
  }
}

@media (min-width: 960px) {
  /* The theme opens panels on :hover alone. Suppressing that is only safe once the
     script is running, hence the .bw-nav-js gate — with no JS the hover panel stays. */
  .bw-nav-js .header-section .bw-nav-fallback-item > .header-nav-dropdown-panel,
  .bw-nav-js .header-section .bw-nav-fallback-item > .header-nav-dropdown-menu-scope,
  .bw-nav-js .header-section .bw-nav-fallback-item:hover > .header-nav-dropdown-panel,
  .bw-nav-js .header-section .bw-nav-fallback-item:hover > .header-nav-dropdown-menu-scope {
    display: block;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    animation: none;
    transform: translateY(-10px);
    transition:
      opacity var(--bw-dur-brisk) var(--bw-ease-standard),
      transform var(--bw-dur-brisk) var(--bw-ease-standard),
      visibility 0s linear var(--bw-dur-brisk);
  }

  .bw-nav-js .header-section .bw-nav-fallback-item.bw-nav-open > .header-nav-dropdown-panel,
  .bw-nav-js .header-section .bw-nav-fallback-item.bw-nav-open > .header-nav-dropdown-menu-scope {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition:
      opacity var(--bw-dur-calm) var(--bw-ease-standard),
      transform var(--bw-dur-calm) var(--bw-ease-standard),
      visibility 0s;
  }

  .header-section.bw-nav-panel-open .header__container-top-wrap.page-width::before {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
  }
}

.header-section .bw-mega {
  inset-block-start: calc(100% + 10px);
}

.header-section .bw-mega__panel {
  --bw-mega-fg: var(--bw-cream, #fcfcfa);

  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  min-height: 544px;
  padding: 20px;
  background: rgba(169, 173, 165, 0.3);
  border-radius: 44px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
}

/* The panel is a 0.3-alpha glass, so its legibility is the page behind it. Only the home hero
   (the header's .transparent state, which is the composition the mock draws) is dark enough for
   cream; every other page reads white through the glass, and the stuck pill's own dark glass
   stops at the pill. Hence: ink while the glass is light, and the pill's R45 dark glass under
   the panel whenever the header is stuck. */
@supports (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .header-section:not(.transparent) .bw-mega__panel {
    --bw-mega-fg: var(--bw-ink, #06402d);
  }
}

.theme-sticky-header--sticky .header-section .bw-mega .bw-mega__panel {
  --bw-mega-fg: var(--bw-cream, #fcfcfa);

  background: rgba(6, 64, 45, 0.82);
}

@supports not (
  (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
) {
  .header-section .bw-mega__panel {
    background: rgba(86, 96, 82, 0.94);
  }
}

.header-section .bw-mega__rail {
  flex: 0 0 237px;
  width: 237px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-section .bw-mega__rail-row {
  display: block;
}

.header-section .bw-mega__rail-link {
  display: flex;
  gap: 6px;
  align-items: center;
  box-sizing: border-box;
  height: 57px;
  padding-inline: 20px;
  font-family: var(--bw-font-body);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.18;
  color: var(--bw-mega-fg, var(--bw-cream, #fcfcfa));
  border-radius: 8px;
  transition: background-color var(--bw-dur-fast) var(--bw-ease-standard), color var(--bw-dur-fast) var(--bw-ease-standard);
}

.header-section .bw-mega__rail:not(:hover):not(:focus-within) > .bw-mega__rail-row:first-child > .bw-mega__rail-link,
.header-section .bw-mega__rail-link:hover,
.header-section .bw-mega__rail-link:focus-visible {
  color: rgb(81, 111, 79);
  background-color: var(--bw-cream, #fcfcfa);
}

.header-section .bw-mega__rail-badge {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding-inline: 6px;
  font-family: var(--bw-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--bw-ink, #06402d);
  background: var(--bw-accent, #51dc70);
  border-radius: 17px;
}

.header-section .bw-mega__rule {
  flex: 0 0 1px;
  width: 1px;
  height: 455px;
  margin-inline: 16px 32px;
  background: var(--bw-mega-fg, var(--bw-cream, #fcfcfa));
}

.header-section .bw-mega__featured {
  flex: 0 1 363px;
  width: 363px;
  height: 472px;
  margin-inline-end: 32px;
  overflow: hidden;
  border-radius: 16px;
}

.header-section .bw-mega__featured-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-section .bw-mega__cards {
  display: flex;
  flex: 1 1 auto;
  gap: 24px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-section .bw-mega__card {
  flex: 0 1 320px;
  min-width: 0;
}

.header-section .bw-mega__card-link {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-block: 11px;
  color: var(--bw-mega-fg, var(--bw-cream, #fcfcfa));
}

.header-section .bw-mega__card-media {
  display: block;
  aspect-ratio: 320 / 374;
  overflow: hidden;
  border-radius: 16px;
}

.header-section .bw-mega__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bw-dur-slow) var(--bw-ease-standard);
}

.header-section .bw-mega__card-link:hover .bw-mega__card-img {
  transform: scale(var(--bw-zoom));
}

.header-section .bw-mega__card-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.header-section .bw-mega__card-title {
  overflow: hidden;
  font-family: var(--bw-font-body);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.6;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.header-section .bw-mega__card-price {
  font-family: var(--bw-font-body);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
}

/* The glass hugs its cards. A full five-card rail still fills the pill's width (5 x 330 + 4 x 24 +
   40 = 1786), and a shorter menu keeps the designed card size instead of stretching the panel
   across the page with a 550px void on either side of two centred cards. */
.header-section .bw-mega--learn .bw-mega__panel {
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  min-height: 564px;
  padding: 15px 20px;
  margin-inline: auto;
}

.header-section .bw-mega__learn {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 330px);
  grid-template-columns: none;
  gap: 24px;
  justify-content: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  list-style: none;
}

.header-section .bw-mega__learn-card {
  min-width: 0;
}

.header-section .bw-mega__learn-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-block: 10px;
  color: var(--bw-mega-fg, var(--bw-cream, #fcfcfa));
}

.header-section .bw-mega__learn-media {
  display: block;
  aspect-ratio: 329 / 464;
  overflow: hidden;
  border-radius: 16px;
}

.header-section .bw-mega__learn-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--bw-dur-slow) var(--bw-ease-standard);
}

.header-section .bw-mega__learn-link:hover .bw-mega__learn-img {
  transform: scale(var(--bw-zoom));
}

.header-section .bw-mega__learn-title {
  padding-block: 7px;
  font-family: var(--bw-font-body);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
}

@media (max-width: 1559px) {
  .header-section .bw-mega__rule,
  .header-section .bw-mega__featured {
    display: none;
  }

  .header-section .bw-mega__cards {
    margin-inline-start: 32px;
  }

  .header-section .bw-mega__card {
    flex: 1 1 0;
  }
}

@media (max-width: 1199px) {
  .header-section .bw-mega__card-title {
    font-size: 22px;
  }

  .header-section .bw-mega__card-price {
    font-size: 18px;
  }

  .header-section .bw-mega__learn-title {
    font-size: 18px;
  }
}

@media (max-width: 959px) {
  .header-section .bw-mega {
    display: none;
  }
}

.footer .footer__menu-title {
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: normal;
}

.footer .footer__menu-content {
  line-height: 1.6;
}

.footer .footer__menu-item a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bw-dur-brisk) var(--bw-ease-standard);
}

.footer .footer__menu-item a:hover,
.footer .footer__menu-item a:focus-visible {
  text-decoration-color: currentColor;
}

/* The footer columns are the site's secondary navigation, so on touch each row is a target,
   not a line of prose; the 15px item lead is folded into the row so the column keeps its rhythm. */
@media (max-width: 959px) {
  .footer .footer__menu-item {
    padding-block-start: 0;
  }

  .footer .footer__menu-item a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

.footer .footer__email-subscribe-title,
.footer .footer__social-media-title {
  line-height: 1.6;
}

.footer .footer__custom-text-title:empty {
  display: none;
}

.footer .footer__social-media:has(> .footer__social-media-content:empty) .footer__social-media-title {
  display: none;
}

.footer .footer__social-media-content a {
  display: inline-flex;
  color: inherit;
  transition: opacity var(--bw-dur-fast) var(--bw-ease-standard);
}

@media (hover: hover) {
  .footer .footer__social-media-content a:hover {
    opacity: 0.7;
  }
}

.footer .block-subscription__inline-form .field {
  height: 46px;
  margin-block-end: 0;
  background-color: transparent;
}

.footer .block-subscription__inline-form .button {
  flex: 0 0 auto;
  max-width: none;
  word-break: normal;
  white-space: nowrap;
}

.footer .block-subscription__inline-form .field::after {
  border-color: rgba(var(--color-text), 0.5);
  border-width: 1px;
  border-radius: 36px;
}

.footer .block-subscription__inline-form .field__input {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
}

.footer .block-subscription__inline-form .field__input::placeholder {
  color: rgba(var(--color-text), 0.75);
  opacity: 1;
}

.footer .block-subscription__inline-form .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* Footer: the client's white one-line logo takes the band the giant text wordmark drew (the
   image is 8.6:1, the text band was ~1880 x 243 at 1920). */
.footer .footer__bw-logo {
  width: 100%;
}

.footer .bw-footer-logo {
  display: block;
  width: min(100%, 1880px);
  height: auto;
  margin-inline: auto;
}

.footer .footer__bw-logo--stacked .bw-footer-logo {
  width: min(60%, 560px);
}

.bw-wordmark {
  display: block;
  margin: 0;
  font-family: var(--bw-font-condensed);
  font-size: min(14.9vw, 286px);
  font-weight: 400;
  line-height: 0.85;
  color: rgb(var(--color-text));
  text-align: center;
  text-indent: 0.05em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .footer .footer__inner {
    display: grid;
    grid-template-columns: 420px repeat(4, minmax(0, 1fr));
    column-gap: 20px;
    align-items: start;
    padding-inline: 20px;
  }

  .footer .footer__inner > .footer__group:has(.footer__email-subscribe) {
    grid-row: 1;
    grid-column: 1;
  }

  .footer .footer__inner > .footer__group:has(.footer__menu) {
    grid-row: 1;
    grid-column: 2 / -1;
  }

  .footer .footer__inner > .footer__group:has(.footer__custom-text),
  .footer .footer__inner > .footer__group:has(.footer__bw-logo),
  .footer .footer__inner > .footer__group:has(.footer__copyright) {
    grid-column: 1 / -1;
  }

  .footer .footer__group .footer__menu {
    flex: 1 1 0;
    min-width: 0;
  }
}