@layer sections {
  /* B2B footer (PAGE-06). Pixel-perfect pass (L-0052, D-21): the literal Figma values — mobile
     frame 1478:1482 (375) below 768 px, desktop frame 466:3259 (1280) from 1024 px; 768–1023 is a
     2×2 bridge with the mobile type. D-13 removed «Партнерам», «Програма лояльності», «Оплата та
     доставка», «Повернення товару» and the payment marks: the remaining links close up (no empty
     rows), so on mobile the bottom bar follows the three link rows 23 px below them, as in Figma;
     on desktop the contacts column decides the bar position and nothing moves. */
  .site-footer {
    --footer-muted: #747474;
    /* The white gap after the FAQ: 22 px (mobile), 46 px (desktop). */
    margin-top: 22px;
    padding-block: 51px 63px;
    background-color: var(--c-grey-100);
    color: var(--c-black);
  }

  /* D5-15 f, 02-UI-REVIEW item 7: the hero CTA jump (no JS) moves focus to the footer, so a
     keyboard user sees an inset ring (inset, so it stays inside the viewport at the page
     bottom). Mouse focus shows none via the shared :focus:not(:focus-visible) rule. */
  .site-footer:focus-visible {
    outline: 2px solid var(--c-black);
    outline-offset: -4px;
  }

  .site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  /* Brand: logo (1478:1523, 200×16), then the socials row. Block box and block image: an
     inline image would sit on a line box whose strut adds a descender strip under the logo
     (05-12, D5-15 g3). fit-content keeps the link's hit area on the logo. */
  .site-footer__logo {
    display: block;
    width: fit-content;
  }

  .site-footer__logo img {
    display: block;
    width: 200px;
    height: auto;
  }

  /* Icon rows. The layout box of every icon is its Figma glyph box; the link around it keeps a
     larger hit area (6 px on every side, pulled back with a negative margin), so neighbours
     never overlap and the glyphs land on the Figma positions. */
  .site-footer__icons {
    display: flex;
    flex-wrap: wrap;
  }

  /* Socials: Instagram 20×20 and Facebook 21×21 share their bottom edge; 19 px under the logo,
     16 px apart (Figma 1478:1521 / 1478:1519). */
  .site-footer__brand .site-footer__icons {
    align-items: flex-end;
    column-gap: 16px;
    margin-top: 19px;
  }

  .site-footer__icon {
    display: block;
    margin: -6px;
    padding: 6px;
    text-decoration: none;
  }

  .site-footer__icon img {
    display: block;
    transition: opacity 150ms ease;
  }

  .site-footer__icon--instagram img {
    width: 20px;
    height: 20px;
  }

  .site-footer__icon--facebook img {
    width: 21px;
    height: 21px;
  }

  .site-footer__icon--telegram img {
    width: 19px;
    height: 19px;
  }

  .site-footer__icon--viber img {
    width: 18px;
    height: 19px;
  }

  @media (hover: hover) {
    .site-footer__icon:hover img {
      opacity: 0.7;
    }
  }

  /* Contacts: title, phone, messengers, email (Figma 1478:1518 / 1517 / 1514 / 1505). Figma
     draws the title glyphs 1 px lower in its 19.5 px box than the browser does: the column starts
     1 px lower (94, box 200 in Figma) and the phone margin is 1 px less. */
  .site-footer__contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 94px;
  }

  .site-footer__title {
    font-size: 16px;
    line-height: 19.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
  }

  .site-footer__phone {
    margin-top: 14.5px;
    font-size: 23px;
    line-height: 28px;
    font-weight: 600;
  }

  /* Messengers: Telegram 19×19 and Viber 18×19, top-aligned, 17 px apart, 25 px under the
     phone. */
  .site-footer__contacts .site-footer__icons {
    align-items: flex-start;
    column-gap: 17px;
    margin-top: 25px;
  }

  .site-footer__email {
    margin-top: 22px;
    font-size: 12px;
    line-height: 15px;
    color: var(--footer-muted);
    overflow-wrap: anywhere;
  }

  /* Shop links (1478:1504 / 1478:1503): two columns at x 20 and 196, Montserrat 400 14/29 —
     every character of the node is overridden to Montserrat Regular, so the alternate face is
     not used here. Box top 388 in Figma; its glyphs sit 1 px lower than the browser's, hence
     45 + 22 (bar). */
  .site-footer__nav {
    display: grid;
    grid-template-columns: minmax(0, 176fr) minmax(0, 159fr);
    margin-top: 45px;
  }

  .site-footer__links {
    display: flex;
    flex-direction: column;
    min-width: 0;
    font-size: 14px;
    line-height: 29px;
  }

  .site-footer__links a {
    overflow-wrap: anywhere;
  }

  /* Bottom bar (1478:1483 COPYRIGHTS, 321 px wide): a 1 px #d2d2d2 line 23 px under the links,
     the copyright 24 px under the line's top edge; payment marks (off by default) under it. The
     line stops 14 px short of the column's right edge (321 of 335 at 375), on wider phones too. */
  .site-footer__bottom {
    display: flex;
    flex-direction: column;
    gap: 11px;
    max-width: calc(100% - 14px);
    margin-top: 22px;
    padding-top: 23px;
    border-top: 1px solid var(--c-line);
  }

  /* 1478:1502: Montserrat 400 12/27, starts 1 px left of the column. */
  .site-footer__meta {
    margin-inline-start: -1px;
    font-size: 12px;
    line-height: 27px;
    color: var(--footer-muted);
  }

  .site-footer__payments {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  .site-footer__payments img {
    width: 36px;
    height: 24px;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-footer__icon img {
      transition: none;
    }
  }

  /* Below the 375 frame the 176 : 159 split leaves the second column under the width of
     «Угода користувача»; it would wrap and the two columns lose their common rows. The second
     track never goes below its longest link (max-content); otherwise the split stays, so the
     column moves continuously into its 375 position (x 196). */
  @media (max-width: 374.98px) {
    .site-footer__nav {
      grid-template-columns: minmax(0, 176fr) minmax(max-content, 159fr);
    }
  }

  /* Tablet: 2×2 — brand / contacts, then the two link columns; mobile type and icon sizes. */
  @media (min-width: 768px) {
    .site-footer__grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: 32px;
      row-gap: 48px;
    }

    .site-footer__contacts,
    .site-footer__nav {
      margin-top: 0;
    }

    .site-footer__nav {
      grid-column: 1 / -1;
      grid-template-columns: subgrid;
    }

    .site-footer__bottom {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      max-width: none;
    }
  }

  /* Desktop: Figma 466:3259 — container 1220 at x 30, columns at 30 / 361 / 747 / 1032. The
     links start the row at 88, the logo 5 px lower, the contacts title 6 px lower (each text
     block 1 px more: Figma draws these glyphs 1 px lower in their boxes than the browser). */
  @media (min-width: 1024px) {
    .site-footer {
      margin-top: 46px;
      padding-block: 88px 109px;
    }

    .site-footer .container--wide {
      width: min(100% - 60px, 1220px);
    }

    .site-footer__grid {
      grid-template-columns: minmax(0, 331fr) minmax(0, 386fr) minmax(0, 285fr) minmax(0, 218fr);
      column-gap: 0;
      row-gap: 0;
    }

    .site-footer__brand {
      grid-column: 1;
      margin-top: 5px;
    }

    .site-footer__logo img {
      width: 225px;
    }

    .site-footer__brand .site-footer__icons {
      column-gap: 19px;
      margin-top: 39px;
    }

    .site-footer__contacts {
      grid-column: 2;
      margin-top: 7px;
    }

    /* 466:3295: 600 17/20.72, 1 px left of the phone. */
    .site-footer__title {
      margin-inline-start: -1px;
      font-size: 17px;
      line-height: 20.72px;
    }

    .site-footer__phone {
      margin-top: 41.28px;
    }

    /* Telegram 17×17, Viber 16×17, 14 px apart, 12 px under the phone. */
    .site-footer__contacts .site-footer__icons {
      column-gap: 14px;
      margin-top: 12px;
    }

    .site-footer__icon--telegram img {
      width: 17px;
      height: 17px;
    }

    .site-footer__icon--viber img {
      width: 16px;
      height: 17px;
    }

    .site-footer__email {
      margin-top: 25px;
      font-size: 13px;
      line-height: 16px;
    }

    .site-footer__nav {
      grid-column: 3 / 5;
      grid-row: 1;
      margin-top: 1px;
    }

    .site-footer__links {
      line-height: 27px;
    }

    /* 466:3260: the line 29 px under the email, the copyright 20 px under the line's top. */
    .site-footer__bottom {
      margin-top: 29px;
      padding-top: 19px;
    }

    .site-footer__meta {
      margin-inline-start: 0;
      font-size: 13px;
    }
  }
}