/* The old chrome shared across pages, in redesign mode (docs/redesign-mode.md). D's file; the gate
   (server/redesign-gate.js) links it after redesign.css on every non-admin page, in the mode only. Every rule is under html.rd
   (tests/unit/rd-css-scope.test.js), and it keeps to what Safari 15.6 reads: physical sides, no :is()/:where()/:has().

   1. The consent chip (js/consent.js), which draws itself with inline styles, so its look here needs !important. A paper pill
      with an ink outline and the low hard shadow, in the body face. Its position is left to consent.js, which keeps it in the
      bottom-left corner or lifts it above a bottom bar (#689); nothing here pins it. The native pages (new.html, new-faq.html)
      place it themselves (#675), so they are left alone.
   2. The old site footer, the same markup on products, product, how and terms (pickup's is a shorter cousin; index.html is
      new.html in the mode). Pages keep their own footer (the shell's default since #683). Black in the old look, here the
      cream ground with ink text. Every owner-editable contact stays exactly where it is (WhatsApp, phone, email, Instagram,
      the business line); only the look changes. The brand line is the one heading in it, so it alone is hand-lettered; the
      contact buttons are round outlined cut-outs and the page links are pills. Pages built in the redesign (html.rd-native)
      have their own footer and are left alone.

   (The shell's own header and footer are guarded against the pages' bare header {} / footer {} rules in redesign.css since
   #683, so nothing here repeats that.) */

/* ---------- 1. the consent chip ---------- */
html.rd:not(.rd-native) #cookieNotice {
  padding: 6px 12px !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-micro) !important;
  font-weight: var(--weight-label) !important;
  line-height: 1.4 !important;
  color: var(--color-ink) !important;
  background: var(--color-paper) !important;
  border: var(--border-thin) solid var(--color-ink) !important;
  border-radius: var(--radius-pill) !important;
  box-shadow: var(--shadow-sm) !important;
}
html.rd:not(.rd-native) #cookieNotice button {
  min-width: 24px;
  min-height: 24px;
  color: var(--color-ink) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-body) !important;
  font-weight: var(--weight-strong) !important;
}

/* ---------- 2. the old site footer ---------- */
html.rd:not(.rd-native) body > footer {
  padding: var(--space-3xl) 0 calc(var(--space-3xl) + 72px);
  background: none;
  border: 0;
  box-shadow: none;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-small);
  line-height: var(--leading-body);
  text-align: right;
}
html.rd:not(.rd-native) body > footer .wrap {
  max-width: var(--column);
  padding: 0 var(--gutter);
}
html.rd:not(.rd-native) body > footer a {
  color: var(--color-ink);
  font-weight: var(--weight-label);
}
html.rd:not(.rd-native) body > footer p {
  margin: var(--space-xs) 0 0;
  color: var(--color-ink);
  opacity: 1;
}
html.rd:not(.rd-native) body > footer .foot-brand,
html.rd:not(.rd-native) body > footer p[data-edit$='-footer-brand'] {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: var(--text-signature);
  line-height: 1;
  color: var(--color-ink);
  text-shadow: var(--title-offset) var(--title-offset) 0 var(--title-offset-hero);
}
html.rd:not(.rd-native) body > footer .foot-icons {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  gap: 0;
  margin: var(--space-md) 0 var(--space-sm);
}
html.rd:not(.rd-native) body > footer .foot-icon {
  display: -webkit-inline-flex;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin: 0 0 0 var(--space-sm);
  border: var(--border-thin) solid var(--color-ink);
  border-radius: 50%;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: var(--shadow-sm);
  filter: none;
  transform: none;
  transition: transform var(--dur-press) var(--ease-pop);
}
html.rd:not(.rd-native) body > footer .foot-icon.fi-wa {
  background: var(--color-whatsapp);
}
html.rd:not(.rd-native) body > footer .foot-icon:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
html.rd:not(.rd-native) body > footer .foot-icon svg {
  width: 22px;
  height: 22px;
}
html.rd:not(.rd-native) body > footer .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
html.rd:not(.rd-native) body > footer .foot-contact {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--text-small);
}
html.rd:not(.rd-native) body > footer .foot-contact > span {
  display: block;
}
html.rd:not(.rd-native) body > footer .fc-label {
  color: var(--color-ink);
  font-weight: var(--weight-label);
}
html.rd:not(.rd-native) body > footer .foot-contact a {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.rd:not(.rd-native) body > footer .foot-b2b {
  max-width: var(--measure-body);
  margin: var(--space-xs) 0 0;
  font-size: var(--text-small);
}
html.rd:not(.rd-native) body > footer .foot-tag,
html.rd:not(.rd-native) body > footer .tag {
  font-size: var(--text-micro);
}
/* the page links as pills; the dots between them go, the pills space themselves */
html.rd:not(.rd-native) body > footer .foot-legal {
  margin-top: var(--space-md);
  font-size: var(--text-small);
}
html.rd:not(.rd-native) body > footer .foot-legal > span[aria-hidden='true'] {
  display: none;
}
html.rd:not(.rd-native) body > footer .foot-legal a,
html.rd:not(.rd-native) body > footer a.back {
  display: inline-block;
  margin: 0 0 var(--space-xs) var(--space-xs);
  padding: 8px 14px;
  border: var(--border-thin) solid var(--color-ink);
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-weight: var(--weight-label);
  text-decoration: none;
}