/* Футер сайта — подключается отдельно от site.css, использует его токены (:root). */
.footer { background: var(--ink); color: #fff; padding-block: var(--sec); }
.footer__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px 24px; flex-wrap: wrap; }
.footer__title { font-size: clamp(24px, 1.1rem + .9vw, 32px); font-weight: 500; }
.footer__sub { color: var(--muted); font-size: 16px; }
.footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 40px; }
.footer__col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer__label { font-size: 14px; line-height: 19px; font-weight: 600; text-transform: uppercase; color: var(--gold); }
.footer__col a, .footer__link-btn { color: var(--on-dark); text-decoration: none; font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.footer__col a:hover, .footer__link-btn:hover { color: #fff; }
.footer__rule { background: var(--line-2); margin-block: 40px; opacity: .6; }
.footer__bottom { display: grid; grid-template-columns: 416fr 512fr 272fr; gap: 32px 48px; font-size: 14px; line-height: 19px; color: var(--on-dark); }
.footer__brand { font-size: clamp(20px, 1rem + .5vw, 25px); line-height: 34px; font-weight: 500; color: #fff; margin-bottom: 12px; }
.footer__contacts { display: flex; flex-direction: column; gap: 10px; }
.footer__contacts a { color: #fff; text-decoration: none; }
.footer__phone { font-size: 18px; font-weight: 500; }
.footer__supplier { display: flex; flex-direction: column; gap: 8px; text-align: right; align-items: flex-end; }
.footer__site { color: var(--gold); font-size: 21px; line-height: 28px; font-weight: 500; text-decoration: none; }
.footer__legal { margin-top: 32px; font-size: 12px; color: #7f8a85; }
.footer__legal a { color: inherit; }

@media (max-width: 1000px) {
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
  .footer__bottom { grid-template-columns: 1fr 1fr; }
  .footer__supplier { grid-column: 1 / -1; text-align: left; align-items: flex-start; }
}

@media (max-width: 640px) {
  .footer__contacts a { padding-block: 8px; }
  .footer__site { padding-block: 8px; }
  .footer__cols { gap: 28px 16px; }
  .footer__bottom { grid-template-columns: 1fr; }
}

.footer__col .nav-btn { color: var(--on-dark); font-size: 15px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font-family: inherit; }
.footer__col .nav-btn:hover { color: #fff; }
.footer__contacts p { margin: 0; }