/* ==========================================================================
   LAYOUT — announcement bar, header, mega-menu, mobile drawer, cart drawer,
   footer. Depends on tokens.css, base.css, components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Announcement bar
   ------------------------------------------------------------------------ */
.g1-announce {
  background: var(--g1-red);
  color: var(--g1-text);
  text-align: center;
  overflow: hidden;
}

.g1-announce__viewport {
  position: relative;
  height: 40px;
}

.g1-announce__item {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: var(--g1-space-5);
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-semibold);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(100%);
  transition:
    opacity var(--g1-duration-base) var(--g1-ease-out),
    transform var(--g1-duration-base) var(--g1-ease-out);
}
.g1-announce__item.is-active { opacity: 1; transform: none; }
.g1-announce__item.is-leaving { opacity: 0; transform: translateY(-100%); }

/* No JS: show the first message rather than an empty red strip. */
html.no-js .g1-announce__item:first-child { opacity: 1; transform: none; }

.g1-announce a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------ */
.g1-header {
  position: sticky;
  top: 0;
  z-index: var(--g1-z-header);
  background: var(--g1-bg);
  color: var(--g1-text);
  border-bottom: var(--g1-border);
  transition:
    background-color var(--g1-duration-base) var(--g1-ease-out),
    color var(--g1-duration-base) var(--g1-ease-out);
}

/*
 * Over the hero the header floats transparently with LIGHT contents, because
 * the hero photograph behind it is dark. The moment it sticks it becomes the
 * normal white header. Both states are declared explicitly — inheriting from
 * the page would give dark-on-dark over the hero.
 */
.g1-home .g1-header:not(.is-stuck):not(.is-open) {
  background: transparent;
  border-bottom-color: transparent;
  color: var(--g1-text-invert);
}
.g1-home .g1-header:not(.is-stuck):not(.is-open) .g1-nav__link,
.g1-home .g1-header:not(.is-stuck):not(.is-open) .g1-icon-btn,
.g1-home .g1-header:not(.is-stuck):not(.is-open) .g1-header__burger,
.g1-home .g1-header:not(.is-stuck):not(.is-open) .g1-header__brand {
  color: var(--g1-text-invert);
}
.g1-home .g1-header:not(.is-stuck):not(.is-open) .g1-icon-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

/*
 * Named grid areas rather than bare columns.
 *
 * The bar holds four children (burger, nav, brand, actions) but only ever
 * shows three at once. With implicit column placement, any rule that
 * accidentally leaves both the burger and the nav visible pushes the fourth
 * child onto a second row — which is exactly what happened when the burger's
 * base `display: grid` was declared after the media query that hides it.
 *
 * Explicit areas make placement independent of source order and of how many
 * children happen to be visible, so that class of bug cannot recur.
 */
.g1-header__bar {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  grid-template-areas: "burger brand actions";
  align-items: center;
  gap: var(--g1-space-3);
  height: var(--g1-header-h);
}

.g1-header__burger { grid-area: burger; }
.g1-header__brand  { grid-area: brand; }
.g1-header__actions{ grid-area: actions; }
.g1-nav            { grid-area: nav; }

@media (min-width: 1024px) {
  .g1-header__bar {
    height: var(--g1-header-h);
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand nav actions";
    gap: var(--g1-space-6);
  }
}

.g1-header__brand {
  display: flex;
  align-items: center;
  font-family: var(--g1-font-display);
  font-size: 1.5rem;
  letter-spacing: var(--g1-tracking-display);
  text-transform: uppercase;
  white-space: nowrap;
}
/* The supplied logo is a white knockout, which disappears on a white header.
   Inverting it renders the mark dark; over the hero it stays as-is. */
.g1-header__brand img {
  height: auto;
  width: auto;
  max-height: 38px;      /* BPN's wordmark is 37px tall */
  max-width: 150px;      /* ...and 116px wide; this leaves headroom for a wider lockup */
  filter: invert(1);
  transition: filter var(--g1-duration-base) var(--g1-ease-out);
}

@media (max-width: 1023px) {
  .g1-header__brand img { max-height: 30px; max-width: 120px; }
}
.g1-home .g1-header:not(.is-stuck):not(.is-open) .g1-header__brand img {
  filter: none;
}

/* The logo is the primary "go home" control; give it a full touch target
   rather than letting it collapse to the image height. */
.g1-header__brand a,
.g1-header__brand .custom-logo-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.g1-header__actions {
  display: flex;
  align-items: center;
  gap: var(--g1-space-1);
  justify-self: end;
}

.g1-icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--g1-radius-sm);
  color: var(--g1-text);
  transition: background-color var(--g1-duration-fast) var(--g1-ease-out);
}
.g1-icon-btn:hover { background: var(--g1-surface-2); }

.g1-cart-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 18px;
  height: 18px;
  padding-inline: 4px;
  display: grid;
  place-items: center;
  background: var(--g1-red);
  border-radius: var(--g1-radius-pill);
  font-family: var(--g1-font-ui);
  font-size: 12px;
  font-weight: var(--g1-weight-bold);
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--g1-duration-fast) var(--g1-ease-out),
              transform var(--g1-duration-fast) var(--g1-ease-out);
}
.g1-cart-count.is-filled { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Desktop navigation
   ------------------------------------------------------------------------ */
/* Nav and burger are mutually exclusive; both are declared here so the
   cascade cannot be broken by a later base rule. */
.g1-nav { display: none; }

.g1-header__burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--g1-text);
}

@media (min-width: 1024px) {
  /* Centred in the free column, which reproduces the reference's generous
     offset from the logo without hard-coding a margin. */
  .g1-nav { display: block; justify-self: center; }
  .g1-nav__list { display: flex; align-items: center; gap: 3.25rem; }   /* 52px */
  .g1-header__burger { display: none; }
}

.g1-nav__item { position: static; }

/* Measured off the reference header: 16px, weight 900, letter-spacing -0.2px,
   68px between items, black.
   Ours was almost the inverse — 13px/700 with +0.12em tracking and ~32px gaps,
   which reads as spread-out letters in tightly-packed words where the reference
   is tight letters in widely-spaced words. */
.g1-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding-inline: 0;
  font-family: var(--g1-font-ui);
  font-size: 1rem;                 /* 16px */
  font-weight: 900;
  letter-spacing: -0.0125em;       /* -0.2px at 16px */
  text-transform: uppercase;
  color: var(--g1-text);
  transition: color var(--g1-duration-fast) var(--g1-ease-out);
}

/* The reference marks nothing in the nav — every item is the same black. A
   colour change for the current page was the most visible mismatch. Keeping an
   indicator, but as a rule under the word rather than red type: aria-current
   needs *some* visual counterpart, and an underline is quieter than a recolour. */
.g1-nav__link { position: relative; }

.g1-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 2px;
  /* currentColor, not --g1-text: over the hero the nav inverts to white, and a
     hard-coded black rule would vanish there. */
  background: currentColor;
  transform: scaleX(0);
  transition: transform var(--g1-duration-fast) var(--g1-ease-out);
}
.g1-nav__link:hover::after,
.g1-nav__link.is-active::after,
.g1-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.g1-nav__chev { transition: transform var(--g1-duration-fast) var(--g1-ease-out); }
.g1-nav__toggle[aria-expanded="true"] .g1-nav__chev { transform: rotate(180deg); }
.g1-nav__toggle[aria-expanded="true"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Mega panel
   Full-width, anchored under the header. `hidden` keeps it out of the tab
   order until opened, so it works correctly before JS runs.
   ------------------------------------------------------------------------ */
.g1-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--g1-bg);
  color: var(--g1-text);
  border-top: var(--g1-border);
  border-bottom: var(--g1-border);
  box-shadow: var(--g1-shadow-drawer);
  z-index: var(--g1-z-dropdown);
}
.g1-mega[hidden] { display: none; }

.g1-mega__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g1-space-7);
  max-width: var(--g1-container);
  margin-inline: auto;
  padding: var(--g1-space-7) var(--g1-gutter);
}

@media (min-width: 1024px) {
  .g1-mega__inner { grid-template-columns: 1fr 260px; }
}

.g1-mega__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--g1-space-6);
}

.g1-mega__heading {
  display: block;
  margin-bottom: var(--g1-space-4);
  padding-bottom: var(--g1-space-3);
  border-bottom: var(--g1-border);
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
  color: var(--g1-text);
}

.g1-mega__links { display: grid; gap: var(--g1-space-3); }
.g1-mega__links a {
  font-size: var(--g1-text-body-s);
  color: var(--g1-text-muted);
  transition: color var(--g1-duration-fast) var(--g1-ease-out);
}
.g1-mega__links a:hover { color: var(--g1-text); }

.g1-mega__featured {
  display: block;
  padding: var(--g1-space-4);
  background: var(--g1-surface-2);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
  transition: border-color var(--g1-duration-fast) var(--g1-ease-out);
}
.g1-mega__featured:hover { border-color: var(--g1-red); }
.g1-mega__featured-media {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: var(--g1-space-3);
  overflow: hidden;
  border-radius: var(--g1-radius-sm);
}
.g1-mega__featured-media img { width: 100%; height: 100%; object-fit: cover; }
.g1-mega__featured-title {
  display: block;
  font-family: var(--g1-font-ui);
  font-weight: var(--g1-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--g1-tracking-wide);
  font-size: var(--g1-text-body-s);
}
.g1-mega__featured-price {
  display: block;
  margin-top: 4px;
  font-size: var(--g1-text-body-s);
  color: var(--g1-text-muted);
}

/* Scrim behind the open mega panel. */
.g1-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--g1-z-overlay);
  background: rgba(45, 42, 38, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--g1-duration-base) var(--g1-ease-out),
              visibility var(--g1-duration-base);
}
.g1-scrim.is-open { opacity: 1; visibility: visible; }

/* --------------------------------------------------------------------------
   Mobile drawer
   ------------------------------------------------------------------------ */
.g1-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--g1-z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--g1-bg);
  color: var(--g1-text);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform var(--g1-duration-base) var(--g1-ease-out),
              visibility var(--g1-duration-base);
}
.g1-drawer.is-open { transform: none; visibility: visible; }

.g1-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
  padding-inline: var(--g1-gutter);
  border-bottom: var(--g1-border);
  flex-shrink: 0;
}

.g1-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--g1-space-4) var(--g1-gutter) var(--g1-space-8);
  overscroll-behavior: contain;
}

.g1-drawer__item { border-bottom: var(--g1-border); }

.g1-drawer__link,
.g1-drawer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--g1-space-4);
  padding-block: var(--g1-space-4);
  font-family: var(--g1-font-ui);
  font-size: 1.375rem;
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}
.g1-drawer__summary::-webkit-details-marker { display: none; }
.g1-drawer__summary svg { transition: transform var(--g1-duration-base) var(--g1-ease-out); }
.g1-drawer__item--group details[open] .g1-drawer__summary svg { transform: rotate(180deg); }

.g1-drawer__sub { padding-bottom: var(--g1-space-4); display: grid; gap: var(--g1-space-1); }
.g1-drawer__sub .g1-drawer__item { border: 0; }
.g1-drawer__sub .g1-drawer__link {
  font-size: var(--g1-text-body);
  font-weight: var(--g1-weight-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--g1-text-muted);
  padding-block: var(--g1-space-2);
  font-family: var(--g1-font-body);
}

/* Nested column headings inside the drawer. */
.g1-drawer__sub .g1-drawer__item--group > details > summary { font-size: 1rem; color: var(--g1-red-text); }

.g1-drawer__foot {
  padding: var(--g1-space-5) var(--g1-gutter) var(--g1-space-8);
  border-top: var(--g1-border);
  display: grid;
  gap: var(--g1-space-3);
}

/* --------------------------------------------------------------------------
   Search overlay
   ------------------------------------------------------------------------ */
/* The search panel drops BELOW the header, not over it.
   Anchored at top:0 it covered the header completely — opening search made the
   logo and the whole nav disappear, which reads as having navigated somewhere
   rather than having opened a control. The reference keeps its header in place
   and slides the field down underneath it. */
.g1-search {
  position: fixed;
  inset-inline: 0;
  top: var(--g1-header-offset, 0px);
  z-index: var(--g1-z-dropdown);
  background: var(--g1-bg);
  color: var(--g1-text);
  border-bottom: var(--g1-border);
  padding: var(--g1-space-5) var(--g1-gutter);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--g1-duration-base) var(--g1-ease-out),
              visibility var(--g1-duration-base);
}
.g1-search.is-open { transform: none; visibility: visible; }

.g1-search__form {
  display: flex;
  gap: var(--g1-space-3);
  max-width: var(--g1-container-inner);
  margin-inline: auto;
}
.g1-search__form input { flex: 1; }

/* --------------------------------------------------------------------------
   Cart drawer
   ------------------------------------------------------------------------ */
.g1-cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 100vw);
  z-index: var(--g1-z-drawer);
  display: flex;
  flex-direction: column;
  background: var(--g1-bg);
  color: var(--g1-text);
  border-left: var(--g1-border);
  box-shadow: var(--g1-shadow-drawer);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--g1-duration-base) var(--g1-ease-out),
              visibility var(--g1-duration-base);
}
.g1-cart-drawer.is-open { transform: none; visibility: visible; }

.g1-cart-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--g1-space-5) var(--g1-space-5);
  border-bottom: var(--g1-border);
  flex-shrink: 0;
}
.g1-cart-drawer__title {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-h4);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
}

.g1-cart-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--g1-space-5);
  overscroll-behavior: contain;
}

.g1-cart-drawer__foot {
  padding: var(--g1-space-5);
  border-top: var(--g1-border);
  display: grid;
  gap: var(--g1-space-3);
  flex-shrink: 0;
}

/* Free-shipping progress meter. */
.g1-ship-meter { display: grid; gap: var(--g1-space-2); }
.g1-ship-meter__text { font-size: var(--g1-text-body-s); color: var(--g1-text-muted); }
.g1-ship-meter__text strong { color: var(--g1-text); }
.g1-ship-meter__bar {
  height: 4px;
  background: var(--g1-surface-3);
  border-radius: var(--g1-radius-pill);
  overflow: hidden;
}
.g1-ship-meter__fill {
  height: 100%;
  background: var(--g1-red);
  border-radius: inherit;
  transition: width var(--g1-duration-slow) var(--g1-ease-out);
}
.g1-ship-meter.is-qualified .g1-ship-meter__fill { background: var(--g1-success); }

/* Cart line items. */
.g1-cart-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: var(--g1-space-3);
  padding-bottom: var(--g1-space-4);
  margin-bottom: var(--g1-space-4);
  border-bottom: var(--g1-border);
}
.g1-cart-item:last-child { border-bottom: 0; margin-bottom: 0; }
.g1-cart-item__media { aspect-ratio: 1/1; background: var(--g1-bg); border: var(--g1-border); border-radius: var(--g1-radius-sm); overflow: hidden; }
.g1-cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.g1-cart-item__name {
  font-family: var(--g1-font-ui);
  font-weight: var(--g1-weight-bold);
  font-size: var(--g1-text-body-s);
  text-transform: uppercase;
  letter-spacing: var(--g1-tracking-wide);
}
.g1-cart-item__variant { font-size: var(--g1-text-micro); color: var(--g1-text-subtle); }
.g1-cart-item__price { font-family: var(--g1-font-ui); font-weight: var(--g1-weight-bold); }
.g1-cart-item__remove { color: var(--g1-text-subtle); font-size: var(--g1-text-micro); text-decoration: underline; }
.g1-cart-item__remove:hover { color: var(--g1-error); }

.g1-cart-empty { text-align: center; padding-block: var(--g1-space-9); color: var(--g1-text-muted); }
/* --------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------ */
/* The footer stays dark on the light page, matching the reference. Because it
   inverts, every colour inside it is declared rather than inherited. */
.g1-footer {
  background: var(--g1-dark);
  color: var(--g1-on-dark);
  border-top: 0;
}
.g1-footer__legal,
.g1-footer__bottom { border-top-color: var(--g1-dark-line); }
.g1-footer__social a,
.g1-footer__pay span { border-color: var(--g1-dark-line); }

.g1-footer__main {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--g1-space-7);
  padding-block: var(--g1-space-9);
}

@media (min-width: 640px) {
  .g1-footer__main { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .g1-footer__main { grid-template-columns: 1.4fr repeat(3, 1fr) 1.2fr; gap: var(--g1-space-6); }
}

.g1-footer__heading {
  font-family: var(--g1-font-ui);
  font-size: var(--g1-text-label);
  font-weight: var(--g1-weight-bold);
  letter-spacing: var(--g1-tracking-wider);
  text-transform: uppercase;
  /* The footer stays dark in the light theme, so its headings need the inverse
     ink. This rule sits after the block at the top of the footer section and
     was overriding it back to black-on-black. */
  color: var(--g1-on-dark);
  margin-bottom: var(--g1-space-4);
}

.g1-footer__menu { display: grid; }

/* These are navigation, not prose, so they get a real touch target rather
   than the 23px line box the text alone produced. */
.g1-footer__menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--g1-text-body-s);
  color: var(--g1-on-dark-muted);
  transition: color var(--g1-duration-fast) var(--g1-ease-out);
}

@media (min-width: 1024px) {
  /* Pointer input does not need the padding; tighten the column back up. */
  .g1-footer__menu { gap: var(--g1-space-3); }
  .g1-footer__menu a { min-height: 0; }
}
.g1-footer__menu a:hover { color: var(--g1-on-dark); }

/* The footer logo is the largest mark on the page in the reference — it anchors
   the dark band the way the hero headline anchors the top. */
.g1-footer__logo {
  display: inline-block;
  margin-bottom: var(--g1-space-4);
  max-width: 100%;
}
.g1-footer__logo-img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(300px, 100%);
  /* The asset is a white knockout, which is already correct on --g1-dark. The
     header inverts it; the footer must not. */
  filter: none;
}

.g1-footer__brand-mark {
  display: block;
  font-family: var(--g1-font-display);
  font-size: 1.75rem;
  letter-spacing: var(--g1-tracking-display);
  text-transform: uppercase;
  margin-bottom: var(--g1-space-3);
}
.g1-footer__tagline { color: var(--g1-on-dark-muted); font-size: var(--g1-text-body-s); max-width: 32ch; }

.g1-footer__social { display: flex; gap: var(--g1-space-2); margin-top: var(--g1-space-5); }
.g1-footer__social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
  color: var(--g1-on-dark-muted);
  transition: all var(--g1-duration-fast) var(--g1-ease-out);
}
.g1-footer__social a:hover { color: var(--g1-on-dark); border-color: var(--g1-on-dark); }

.g1-footer__contact { display: grid; font-size: var(--g1-text-body-s); color: var(--g1-on-dark-muted); }

/* tel: and mailto: are the primary support actions on a phone, so they get a
   real touch target rather than a 23px line box. */
.g1-footer__contact a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.g1-footer__contact a:hover { color: var(--g1-on-dark); }
.g1-footer__contact span,
.g1-footer__contact address { padding-block: var(--g1-space-1); }

@media (min-width: 1024px) {
  .g1-footer__contact { gap: var(--g1-space-2); }
  .g1-footer__contact a { min-height: 0; }
}

/* Disclaimer + payment row. */
.g1-footer__legal {
  border-top: var(--g1-border);
  padding-block: var(--g1-space-6);
  display: grid;
  gap: var(--g1-space-5);
}

.g1-footer__disclaimer {
  font-size: var(--g1-text-micro);
  color: var(--g1-on-dark-subtle);
  max-width: 90ch;
  line-height: 1.6;
}

.g1-footer__compliance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g1-space-4);
  font-size: var(--g1-text-micro);
  color: var(--g1-on-dark-subtle);
}

/* Visible only to logged-in admins when a legally required field is unset. */
.g1-footer__missing {
  color: var(--g1-warning);
  font-family: var(--g1-font-mono);
}

.g1-footer__pay { display: flex; flex-wrap: wrap; gap: var(--g1-space-2); align-items: center; }
.g1-footer__pay span {
  display: grid;
  place-items: center;
  height: 28px;
  padding-inline: var(--g1-space-3);
  border: var(--g1-border);
  border-radius: var(--g1-radius-sm);
  font-family: var(--g1-font-ui);
  font-size: 12px;
  font-weight: var(--g1-weight-semibold);
  letter-spacing: var(--g1-tracking-wide);
  text-transform: uppercase;
  color: var(--g1-on-dark-subtle);
}

.g1-footer__bottom {
  border-top: var(--g1-border);
  padding-block: var(--g1-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--g1-space-4);
  font-size: var(--g1-text-micro);
  color: var(--g1-on-dark-subtle);
}
.g1-footer__bottom nav ul { display: flex; flex-wrap: wrap; gap: var(--g1-space-2) var(--g1-space-4); }
.g1-footer__bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }

@media (min-width: 1024px) {
  .g1-footer__bottom nav a { min-height: 0; }
}
.g1-footer__bottom a:hover { color: var(--g1-on-dark); }