.site-footer {
  padding-block: var(--space-4) var(--space-2);
  background: var(--color-primary-dark);
  color: var(--color-surface);
}

.site-footer__main {
  display: grid;
  /* Четвёртая колонка — приложение. `auto-fit` вместо жёстких долей: на узком
     экране колонки складываются сами, и подвал не уезжает вбок. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
}

.site-footer__organization { max-width: 20rem; margin: 0; color: white; font-weight: 700; line-height: 1.45; }
.site-footer__text { max-width: 20rem; margin-top: 0.5rem; color: rgb(var(--color-surface-rgb) / 78%); font-size: 0.9375rem; }
.site-footer__title { margin-bottom: var(--space-2); color: white; font-size: 1rem; font-weight: 700; }
.site-footer__links { display: grid; gap: 0.5rem; list-style: none; font-size: 0.9375rem; }
.site-footer .phone-link--secondary { color: rgb(var(--color-surface-rgb) / 78%); }
.site-footer__links a:hover { color: white; }
.site-footer__status { color: white; font-weight: 600; }
.site-footer__bottom { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid rgb(var(--color-surface-rgb) / 24%); font-size: var(--font-size-small); }

.site-footer__details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  margin: 0;
}

.site-footer__detail {
  display: grid;
  min-width: 0;
  gap: 0.25rem;
}

.site-footer__detail--wide { grid-column: span 2; }
.site-footer__detail dt { color: rgb(var(--color-surface-rgb) / 72%); font-weight: 600; }
.site-footer__detail dd { margin: 0; color: white; overflow-wrap: anywhere; }
.site-footer__detail a:hover { color: white; }

@media (max-width: 48rem) {
  .site-footer__details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__detail--wide { grid-column: span 2; }
}

@media (max-width: 30rem) {
  .site-footer__details { grid-template-columns: 1fr; }
  .site-footer__detail--wide { grid-column: span 1; }
}


/* ─── приложение в подвале ───
 *
 * Значки магазинов и QR стоят на каждой странице, а не только на своей: подвал
 * человек видит там, где дочитал и решает, что делать дальше.
 */
.site-footer__app-text {
  margin: 0 0 .75rem;
  max-width: 18rem;
  color: rgb(var(--color-surface-rgb) / 78%);
  font-size: .9375rem;
}

.site-footer__stores {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .75rem;
}

.site-footer__stores img { display: block; height: 42px; width: auto; }

.site-footer__qr {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: .75rem;
}

/* Белая подложка обязательна: код тёмный, подвал тоже — на нём он не читается
   ни камерой, ни глазом. */
.site-footer__qr img {
  padding: .35rem;
  border-radius: .5rem;
  background: #fff;
}

.site-footer__qr span {
  color: rgb(var(--color-surface-rgb) / 70%);
  font-size: .8125rem;
  line-height: 1.35;
}

.site-footer__app-link {
  color: rgb(var(--color-surface-rgb) / 88%);
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}