/* AFTERTOUGE — Footer mobile layout (≤480px)
   File: /styles/footer-480.css
*/

/* Tighter overall spacing */
.footer.at-pro{
  padding-top: 14px;
}
.footer.at-pro .container{
  padding-left: 12px;
  padding-right: 12px;
}

/* ===== Top section grid =====
   Row 1: brand blurb (spans 2 cols, logo hidden)
   Row 2: two link columns side-by-side (Shop | Support)
*/
.footer.at-pro .at-footer__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  padding: 14px 0;
}

/* Brand row spans both columns, logo removed, text smaller */
.footer.at-pro .at-footer__brand{
  grid-column: 1 / -1;
  text-align: center;
}
.footer.at-pro .at-footer__brand .brand__logo{
  display: none !important;            /* hide AFTERTOUGE logo */
}
.footer.at-pro .brand--sm .brand__text{
  font-size: 13px;                      /* smaller brand text */
  letter-spacing: .25px;
  font-weight: 800;
}
.footer.at-pro .at-footer__brand p{
  margin-top: 6px;
  font-size: 12px;                      /* smaller blurb */
  line-height: 1.5;
  max-width: 42ch;
  margin-left: auto;
  margin-right: auto;
  color: var(--ft-muted);
}

/* Two link columns on the second row */
.footer.at-pro .at-footer__links{
  text-align: left;
}
.footer.at-pro .at-footer__links h5{
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: .24px;
}
.footer.at-pro .at-footer__links ul{
  gap: 6px;
}
.footer.at-pro .at-footer__links a{
  font-size: 13px;
  padding: 4px 0;        /* comfortable tap without adding height */
}

/* ===== Bottom bar (third row visually) =====
   Compact 2-column bar: © on the left, payment chips on the right.
*/
.footer.at-pro .at-footer__bar{
  padding: 10px 0 12px;
  border-top: 1px dashed var(--ft-bd);
}
.footer.at-pro .at-footer__bar__row{
  display: grid;
  grid-template-columns: auto 1fr;  /* left: copyright | right: payments */
  align-items: center;
  gap: 10px;
  text-align: left;                 /* no center stacking */
}
.footer.at-pro .at-footer__bar__row > span{
  font-size: 12px;                  /* smaller © text */
}

/* Payments: smaller chips, right-aligned, still wrap/scroll if needed */
.footer.at-pro .at-footer__payments{
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.footer.at-pro .pm{
  height: 26px;                     /* smaller tokens */
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10.5px;
}
.footer.at-pro .pm__icon{ height: 12px; }

/* Keep back-to-top hidden on mobile */
.footer.at-pro .to-top{ display: none !important; }

/* Safety: no horizontal scroll due to long words */
.footer.at-pro, .footer.at-pro *{
  overflow-wrap: anywhere;
  word-break: break-word;
}




/* ===== Center the two footer link columns and their items (≤480px) ===== */

/* center children within the 2-col grid */
.footer.at-pro .at-footer__grid{
  justify-items: center;
}

/* center headings + links inside each column */
.footer.at-pro .at-footer__links{
  text-align: center;
}
.footer.at-pro .at-footer__links h5{
  text-align: center;
}

/* UL is already display:grid; center each list item */
.footer.at-pro .at-footer__links ul{
  justify-items: center;
}

/* keep hover from shifting the link sideways on mobile */
.footer.at-pro .at-footer__links a:hover{
  transform: none;
}
