/* =========================================================
   INFINITY — sitewide footer, matching the black 4-column footer
   in the new-theme mockups (Shop / Company / Support + newsletter).
   Replaces the old Supex footer. Scoped under .inf-footer.
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap");

.inf-footer{
  --ft-bg:   #0b0a09;
  --ft-text: #ffffff;
  --ft-muted:#d9d4cb;
  --ft-line: rgba(255,255,255,.14);
  --ft-tan:  #dcbb8d;
  position: relative;
  background: var(--ft-bg);
  color: var(--ft-text);
  font-family: 'Outfit', sans-serif;
  padding: 58px 0 0;
  overflow: hidden;
}
.inf-footer *{ box-sizing: border-box; }
.inf-footer ul{ list-style:none; margin:0; padding:0; }
.inf-footer a{ color: inherit; text-decoration: none; }
.inf-footer h4{ color:#fff; font-family:'Outfit',sans-serif; font-size: 16px; font-weight: 600; margin: 0 0 14px; text-transform:none; letter-spacing:0; line-height:1.2; }
.inf-footer p{ color: var(--ft-muted); margin:0; }

.inf-footer .ft-container{ width: 94%; max-width: 1500px; margin: 0 auto; }
.inf-footer .ft-grid{
  display:grid;
  grid-template-columns: minmax(0,1.9fr) repeat(3, minmax(0,.75fr)) minmax(0,1.5fr);
  gap: 30px 36px; align-items: start;
}

/* brand */
.inf-footer .ft-logo img{ height: 44px; width:auto; display:block; }
.inf-footer .ft-tagline{ margin: 12px 0 22px; font-size: 16px; color:#fff; }
.inf-footer .ft-social{ display:flex; flex-wrap:wrap; gap: 18px; }
.inf-footer .ft-social a{ display:inline-flex; align-items:center; justify-content:center; width: 28px; height: 28px; color:#fff; font-size: 20px; transition: color .2s, transform .2s; }
.inf-footer .ft-social a:hover{ color: var(--ft-tan); transform: translateY(-2px); }

/* link columns */
.inf-footer .ft-col li{ margin-bottom: 8px; }
.inf-footer .ft-col li:last-child{ margin-bottom: 0; }
.inf-footer .ft-col a{ font-size: 15.5px; color: var(--ft-muted); transition: color .2s; }
.inf-footer .ft-col a:hover{ color: var(--ft-tan); }

/* newsletter */
.inf-footer .ft-join{ padding-left: 36px; border-left: 1px solid var(--ft-line); }
.inf-footer .ft-join-form{ display:flex; align-items:stretch; height: 52px; background:#fff; border-radius: 999px; overflow:hidden; }
.inf-footer .ft-join-form input[type=email]{
  flex:1; min-width:0; border:0; outline:none; background:transparent; box-shadow:none;
  padding: 0 22px; font-family:'Outfit',sans-serif; font-size: 14.5px; color:#1b1819; height:100%;
}
.inf-footer .ft-join-form input::placeholder{ color:#8a847b; }
.inf-footer .ft-join-form button{
  flex: 0 0 auto; display:flex; align-items:center; gap: 10px; padding: 0 24px; border:0; cursor:pointer;
  background: var(--ft-tan); color:#0d0b0a; font-family:'Outfit',sans-serif; font-size: 15px; font-weight: 500;
  transition: background .2s;
}
.inf-footer .ft-join-form button:hover{ background:#e6c99f; }
.inf-footer .ft-join-msg{ margin-top: 10px; font-size: 14px; }
.inf-footer .ft-join-msg.is-ok{ margin:0; height: 52px; display:flex; align-items:center; padding: 0 22px; background: rgba(255,255,255,.1); border-radius: 999px; color:#fff; }
.inf-footer .ft-join-msg.is-error{ color:#ffb3a8; }

/* bottom bar */
.inf-footer .ft-bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: 12px 30px;
  margin-top: 44px; padding: 22px 0 26px; border-top: 1px solid var(--ft-line);
  font-size: 14.5px; color: var(--ft-muted);
}
.inf-footer .ft-legal{ display:flex; flex-wrap:wrap; gap: 8px 26px; }
.inf-footer .ft-legal a:hover{ color: var(--ft-tan); }
.inf-footer .ft-motto{ color:#fff; }

@media (max-width: 1150px){
  .inf-footer .ft-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .inf-footer .ft-brand{ grid-column: 1 / -1; }
  .inf-footer .ft-join{ grid-column: 1 / -1; padding-left: 0; border-left: 0; padding-top: 22px; border-top: 1px solid var(--ft-line); max-width: 560px; }
}
@media (max-width: 640px){
  .inf-footer{ padding-top: 44px; }
  .inf-footer .ft-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .inf-footer .ft-bottom{ flex-direction:column; align-items:flex-start; }
  .inf-footer .ft-join-form button{ padding: 0 16px; }
}