/* Mobile storefront footer, measured against the supplied Yupoo screenshot.
   Content determines height; no fixed height, float, offsets or negative margins. */
@media (max-width: 760px) {
  .site-shell .site-footer,
  .b-shell .b-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    justify-content: normal;
    column-gap: 16px;
    row-gap: 8px;
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 24px 18px 20px;
    margin: auto 0 0;
    border: 0;
    background: #49bc85;
    color: #fff;
    font-size: 10px;
    font-weight: 400;
    line-height: 17.5px;
  }
  .site-shell .site-footer > div { display: contents; max-width: none; }
  .site-shell .site-footer p,
  .b-shell .b-footer > p { margin: 0; font-size: 10px; line-height: 17.5px; color: inherit; }
  .site-shell .site-footer p:first-child,
  .b-shell .b-footer > p {
    grid-column: 1 / -1;
    grid-row: 1;
    width: 70%;
    max-width: none;
  }
  .site-shell .site-footer p + p,
  .b-shell .b-footer > span {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    font-size: 10px;
    line-height: 17.5px;
  }
  .site-shell .site-footer > button,
  .b-shell .b-footer > div {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    float: none;
    margin: 0;
    padding: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    font-size: 11px;
    line-height: 17.5px;
  }
  .site-shell .site-footer > button { white-space: nowrap; }
  .site-shell .site-footer > button svg { flex-shrink: 0; }
  .b-shell .b-footer > div { max-width: none; flex-wrap: nowrap; justify-content: flex-end; gap: 10px; }
  .b-shell .b-footer a, .b-shell .b-footer button { white-space: nowrap; }
  .b-shell .b-footer a,
  .b-shell .b-footer button { color: inherit; font-size: 10px; line-height: 17.5px; }
}