/* Mobile footer: component-scoped, content and destinations preserved. */
@media (max-width: 767px) {
  #app footer { padding-top: 28px; }
  #app footer .footer-container { padding-inline: 20px; }
  #app footer .footer-content { gap: 24px; padding-bottom: 24px; }
  #app footer .footer-left { padding-bottom: 24px; }
  #app footer .footer-left-top {
    grid-template-columns: minmax(0, 1fr) 88px;
    grid-template-areas: "brand qr" "contact qr";
    column-gap: 16px;
    row-gap: 12px;
    align-items: start;
  }
  #app footer .footer-logo { grid-area: brand; width: 144px; }
  #app footer .footer-qrcode { grid-area: qr; align-self: center; width: 88px; height: 88px; }
  #app footer .footer-contact { grid-area: contact; }
  #app footer .contact-phone { margin-bottom: 2px; }
  #app footer .phone-number { font-size: 23px; white-space: nowrap; letter-spacing: 0; }
  #app footer .footer-title { margin-bottom: 8px; }
  #app footer .footer-columns { column-gap: 16px; }
  #app footer .footer-service-section > .footer-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: start;
  }
  #app footer .footer-column p a {
    min-height: 44px;
    padding-block: 10px;
    overflow-wrap: normal;
    word-break: normal;
  }
  #app footer .footer-shop-section .footer-column p a { width: fit-content; max-width: 100%; }
  #app footer .footer-bottom { padding: 18px 0 20px; }
  #app footer + .footer-beian { padding: 8px 20px 12px; }
  #app footer + .footer-beian p {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0;
    line-height: 0;
    text-align: left !important;
  }
  #app footer + .footer-beian a {
    max-width: 100%;
    min-height: 44px;
    padding: 0;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
  }
}