/*
 * One mobile footer composition for every storefront page.
 * Backgrounds deliberately stay page-specific: the home/commerce footers keep
 * their photographic grey treatment, while product pages keep their brown one.
 */
@media (max-width: 767px) {
  .footer {
    --fr: 2.6666667vw;
    min-height: 0 !important;
    padding: calc(var(--fr) * 5.6) 0 calc(var(--fr) * 2.5) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .footer__inner {
    padding: 0 calc(var(--fr) * 1.6) !important;
  }

  .footer__top {
    display: flex !important;
    flex-flow: row wrap !important;
    align-items: center !important;
    gap: calc(var(--fr) * 1.3) calc(var(--fr) * 2.2) !important;
    margin-bottom: calc(var(--fr) * 5) !important;
  }

  .footer__top .footer__nav {
    display: contents !important;
  }

  .footer__nav {
    gap: calc(var(--fr) * 1.3) calc(var(--fr) * 2.2) !important;
  }

  .footer__nav a {
    font-family: "PP Fraktion Mono", monospace !important;
    font-size: calc(var(--fr) * 1.3) !important;
    font-weight: 400 !important;
    letter-spacing: calc(var(--fr) * -.12) !important;
    line-height: calc(var(--fr) * 1.3) !important;
  }

  .footer__mid {
    margin-bottom: calc(var(--fr) * 2.3) !important;
  }

  .footer__logo {
    display: flex !important;
    width: 100% !important;
    margin-bottom: calc(var(--fr) * 5.5) !important;
    transform: none !important;
  }

  .footer__title {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    column-gap: calc(var(--fr) * .2) !important;
    row-gap: calc(var(--fr) * 1.2) !important;
    margin: 0 0 calc(var(--fr) * 3) !important;
    font-family: Thunder, sans-serif !important;
    font-size: calc(var(--fr) * 3.8) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    letter-spacing: normal !important;
    transform: none !important;
  }

  .footer__title span {
    display: block !important;
    width: 100% !important;
    margin: calc(var(--fr) * 1) 0 0 !important;
    font-size: calc(var(--fr) * 1.8) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .footer__title span strong {
    font-size: inherit !important;
    line-height: inherit !important;
  }

  .footer__form {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    gap: calc(var(--fr) * .8) !important;
    width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
  }

  .footer__label {
    flex: 0 0 calc(var(--fr) * 27.5) !important;
    min-width: 0 !important;
    width: calc(var(--fr) * 27.5) !important;
  }

  .footer__label .input__label,
  .footer__submit {
    font-family: Thunder, sans-serif !important;
    font-size: calc(var(--fr) * 1.8) !important;
    line-height: calc(var(--fr) * 1.8) !important;
  }

  .footer__label input {
    height: calc(var(--fr) * 2.2) !important;
    font-family: "PP Fraktion Mono", monospace !important;
    font-size: calc(var(--fr) * 1.5) !important;
  }

  .footer__submit {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .footer__consents {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: calc(var(--fr) * 31.5) !important;
    margin-top: calc(var(--fr) * .8) !important;
  }

  .footer__consent {
    font-size: 7px !important;
    line-height: 1.35 !important;
  }

  .footer__bottom {
    display: grid !important;
    grid-template-columns: calc(var(--fr) * 18) minmax(0, 1fr) !important;
    gap: calc(var(--fr) * .8) !important;
    align-items: start !important;
  }

  .footer__bottom a,
  .footer__bottom button,
  .footer__bottom p {
    font-family: "PP Fraktion Mono", monospace !important;
    font-size: calc(var(--fr) * 1.3) !important;
    font-weight: 400 !important;
    letter-spacing: calc(var(--fr) * -.12) !important;
    line-height: calc(var(--fr) * 1.3) !important;
  }

  .footer__bottom a:nth-child(2),
  .footer__bottom a:nth-child(4) {
    width: 100% !important;
    text-align: right !important;
  }

  .footer__img {
    top: calc(var(--fr) * 13.5) !important;
    bottom: auto !important;
    left: calc(var(--fr) * 6.5) !important;
    width: calc(var(--fr) * 26) !important;
    transform: none !important;
  }
}