/* ===================== SITE FOOTER =====================
   Shared by every customer-facing page; the admin panel has its own
   shell and never loads this.

   The only black surface on the storefront. Page transitions paint
   nothing, so black reads here as "you have reached the bottom" rather
   than "the page is loading".
   ======================================================= */

/* No global border-box reset in this project, so the footer's padding
   would otherwise add to its width and push the page sideways on a
   phone. Scoped to the footer so nothing else shifts. */
.site-foot,
.site-foot * {
  box-sizing: border-box;
}

.site-foot {
  background: #0a0a0a;
  color: #fff;
  padding: 72px 48px 0;
}

.site-foot__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

/* ---------- brand ---------- */

.site-foot__logo {
  width: 30px;
  height: auto;
  display: block;
  margin-bottom: 14px;
}

.site-foot__logo path { fill: #fff; }

.site-foot__word {
  display: block;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 14px;
}

.site-foot__blurb {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  max-width: 28ch;
}

/* ---------- link columns ---------- */

.site-foot__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.site-foot__heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 4px;
}

.site-foot__col a {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition:
    color var(--dur-base, 320ms) var(--ease-soft, ease),
    transform var(--dur-base, 320ms) var(--ease-out, ease);
}

.site-foot__col a:hover {
  color: #fff;
  transform: translate3d(3px, 0, 0);
}

/* ---------- copyright ---------- */

.site-foot__base {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.site-foot__base p {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.42);
  text-align: center;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .site-foot { padding: 56px 32px 0; }

  .site-foot__inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    padding-bottom: 40px;
  }

  /* The brand block spans the full width above the two link columns. */
  .site-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .site-foot { padding: 44px 22px 0; }

  .site-foot__inner {
    grid-template-columns: 1fr;
    gap: 30px;
    padding-bottom: 32px;
  }

  .site-foot__base { padding: 20px 0 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-foot__col a:hover { transform: none; }
}