/* ═══════════════════════════════════════════════════════════════
   FOOTER — dark, brand + link columns + socials + bottom bar
═══════════════════════════════════════════════════════════════ */

footer { background: var(--navy); padding: 56px 48px 28px; color: rgba(255,255,255,.7); }

/* Centered, wrap-friendly footer — works for any number of link
   columns (index has 3, products has 4) and centers the whole block. */
.ftop {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 56px;
  max-width: 1180px;
  margin: 0 auto;
}
.fbrand { flex: 1 1 280px; max-width: 340px; }
.fc     { flex: 0 1 170px; }

/* ── Brand block ───────────────────────────────────────────── */
.flogo-wrap  { display: flex; align-items: center; margin-bottom: 14px; }
.footer-logo-real {
  width: 130px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
}
.fbrand p  { font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.45); max-width: 260px; margin-bottom: 20px; }

/* ── Socials ───────────────────────────────────────────────── */
.fsoc { display: flex; gap: 8px; }
.sb {
  width: 34px; height: 34px; border-radius: var(--rsm);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: white;
  text-decoration: none;
  transition: border-color .2s, color .2s;
}
.sb .ic { width: 16px; height: 16px; transition: color .2s; }
.sb:hover { border-color: var(--gold); color: var(--gold); }

/* ── Link columns ──────────────────────────────────────────── */
.fc h4 { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gold2); margin-bottom: 14px; }
.fl    { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.fl a  { color: rgba(255,255,255,.5); text-decoration: none; font-size: 13px; transition: color .15s; }
.fl a:hover { color: rgba(255,255,255,.85); }

/* ── Bottom bar ────────────────────────────────────────────── */
.fbot {
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 22px;
  margin: 22px auto 0;
  max-width: 1180px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
}
.fbot p      { font-size: 12px; color: rgba(255,255,255,.4); }
.fbot span   { color: var(--gold2); }
.fbot .ftagline { font-size: 11px; letter-spacing: 2px; color: rgba(255,255,255,.22); }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1080px) {
  footer { padding: 44px 24px 24px; }
  .ftop  { gap: 30px 44px; }
}
@media (max-width: 768px) {
  footer { padding: 40px 20px 22px; text-align: center; }
  .ftop  { gap: 26px 32px; }
  /* Center the brand block + socials when stacked */
  .fbrand     { text-align: center; }
  .fbrand p   { margin-left: auto; margin-right: auto; }
  .flogo-wrap { justify-content: center; }
  .fsoc       { justify-content: center; }
  .fbot       { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
}
@media (max-width: 480px) {
  footer { padding: 32px 16px 20px; }
}

/* ── RTL ────────────────────────────────────────────────────── */
[dir="rtl"] .ftop { direction: rtl; }