/* ── SHARED SITE FOOTER ──
   One definition for every page (home, system, palette, product, about,
   meet-cotiny, contact, privacy, terms, accessibility, shipping-returns).
   Pages load this file and define only --pad (their page gutter); they must
   not restyle .site-footer.

   Layout: warm stone (#E8E4DB) full-width band, forest-green text, no divider
   line. Desktop: one full-width link row, then email | tagline | copyright on
   a second row; one stacked column at <=768px. The link row wraps onto a
   second line when the width runs out instead of shrinking.

   --footer-rule-inset: extra top padding for pages that sit the footer under
   a tinted card. 0 by default; it is added to the top padding. */
.site-footer {
  --footer-rule-inset: 0px;
  --footer-font: 'DM Sans', Arial, sans-serif;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 40px;
  row-gap: 18px;
  background: #E8E4DB;
  border-top: none;
  margin-top: 0;
  padding: calc(28px + var(--footer-rule-inset)) var(--pad) 18px;
  font-family: var(--footer-font);
}
.site-footer-links {
  grid-column: 1 / -1; grid-row: 1; align-self: start; justify-self: start;
  display: flex; gap: 12px 32px; align-items: center; flex-wrap: wrap;
}
.site-footer-links a {
  text-decoration: none; font-family: var(--footer-font); font-size: 14px; font-weight: 500;
  letter-spacing: 0.13em; line-height: 1.2; text-transform: uppercase;
  color: #1C3328; transition: color .22s;
}
.site-footer-links a:hover, .site-footer-links a:focus-visible,
.site-footer-social a:hover, .site-footer-social a:focus-visible { color: rgba(28,51,40,0.7); }
.site-footer a:focus-visible { outline: 1.5px solid var(--forest, #1C3328); outline-offset: 4px; }
.site-footer-social {
  grid-column: 1; grid-row: 2; align-self: baseline; justify-self: start;
  display: flex; gap: 20px; align-items: center; flex-shrink: 0;
}
.site-footer-social a, .site-footer-social span {
  display: flex; align-items: center; gap: 7px; text-decoration: none; font-size: 14px;
  font-weight: 400; letter-spacing: 0.1em; color: #1C3328; transition: color .22s;
}
.site-footer-social a { font-weight: 500; }
.site-footer-copy {
  grid-column: 3; grid-row: 2; align-self: baseline; justify-self: end; text-align: right;
  font-family: var(--footer-font); font-size: 11.5px; font-weight: 400; letter-spacing: 0.11em;
  text-transform: uppercase; color: #1C3328; line-height: 1.4; margin: 0;
}
.site-footer-tagline {
  grid-column: 2; grid-row: 2; align-self: baseline; justify-self: center; text-align: center;
  font-family: var(--footer-font); font-size: 12px; line-height: 1.1; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase; color: #1C3328;
  font-style: normal; margin: 0;
}

/* Tablet: 44px touch targets for the links and social icons. */
@media (min-width: 769px) and (max-width: 1024px) {
  .site-footer-links a, .site-footer-social a { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer-links { column-gap: 28px; row-gap: 0; }
}

/* Phone: stacked single column. Vertical rhythm, top to bottom (all in px):
   rule → 16 → links (two columns, 36px touch rows, no gap between rows) → 0 →
   email (36px touch row) → 4 → brand line → 6 → copyright → 16 (+ safe-area) → page end.
   Pages must not set their own footer spacing; the space above the footer rule
   is the page's last section, which ends with --pre-footer-space. */
@media (max-width: 768px) {
  :root { --pre-footer-space: 48px; }
  .site-footer {
    grid-template-columns: 1fr; row-gap: 0;
    padding: calc(16px + var(--footer-rule-inset)) var(--pad) calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .site-footer-links {
    grid-column: 1; grid-row: 1; justify-self: stretch;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0; column-gap: 20px;
  }
  .site-footer-links a {
    font-size: 13px; font-weight: 500; letter-spacing: 0.11em; line-height: 1.2;
    display: inline-flex; align-items: center; min-height: 36px; padding: 0;
    min-width: 0; overflow-wrap: anywhere;
  }
  .site-footer-social { grid-column: 1; grid-row: 2; justify-self: start; margin-top: 0; gap: 16px; max-width: 100%; }
  .site-footer-social a { min-height: 36px; min-width: 0; overflow-wrap: anywhere; }
  .site-footer-tagline { grid-column: 1; grid-row: 3; justify-self: start; text-align: left; margin: 4px 0 0; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
  .site-footer-copy { grid-column: 1; grid-row: 4; justify-self: start; text-align: left; margin: 6px 0 0; overflow-wrap: anywhere; }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer-links a, .site-footer-social a, .site-footer-social span { transition: none; }
}