.page-footer {
  display: grid;
  grid-template-columns: var(--container);
  justify-content: center;


  margin-block-start: var(--spacing-section-rhythm);
  padding-block: var(--spacing-section-edge);
  padding-block-end: calc(var(--spacing-section-edge) + var(--order-bar-space));

  background: var(--color-surface-strong);
  color: var(--color-text-body-on-strong);
}

.page-footer__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-block-md);
}

.page-footer__partner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-md);
}

.page-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-block-s);
}


.page-footer__email,
.page-footer__phone {
  color: var(--color-controls-links-text-on-strong);


  text-decoration: none;
  transition: color var(--transition-duration) var(--transition-easing);
}

.page-footer__email {
  font: var(--type-heading-h3);
}

.page-footer__phone {
  font: var(--type-text-lead);
}

.page-footer__line {
  display: block;
  overflow: hidden;
  overflow: clip;
}

.page-footer__label {
  display: block;
  position: relative;
  transform-origin: left top;
  transition: transform var(--transition-duration) var(--transition-easing);
}

.page-footer__label::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute;
  top: 100%;
  left: 0;
  transform-origin: left top;
  transform: skewY(6deg);
}

.page-footer__email:focus-visible .page-footer__label,
.page-footer__phone:focus-visible .page-footer__label {
  transform: translateY(-100%) skewY(-6deg);
}

.page-footer__preorder {
  display: flex;
  flex-direction: column;


  gap: var(--spacing-block-s);
}

.page-footer__note {

  font: var(--type-text-lead);
}


.page-footer__codes {
  max-width: 832px;


  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-block-xl);


  list-style: none;
}



@media (min-width: 1200px) {
  .page-footer {
    padding-block-end: var(--spacing-section-edge);
  }

  .page-footer__content {

    grid-template-columns: var(--col-text) minmax(0, 1fr);
    column-gap: var(--spacing-block-xl);
  }
}

@media (hover: hover) {
  .page-footer__email:hover,
  .page-footer__phone:hover {
    color: var(--color-controls-links-text-on-strong-hover);
  }

  .page-footer__email:hover .page-footer__label,
  .page-footer__phone:hover .page-footer__label {
    transform: translateY(-100%) skewY(-6deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-footer__email:focus-visible .page-footer__label,
  .page-footer__email:hover .page-footer__label,
  .page-footer__phone:focus-visible .page-footer__label,
  .page-footer__phone:hover .page-footer__label {
    transform: none;
  }

  .page-footer__label::after {
    display: none;
  }
}