/* ============================================================
   PRICE NINJA — FOOTER (standalone)
   Loaded for every `themes.base` site (Price Ninja AND
   My Best Shopping List), unlike style.css which is PN-only.
   Keep it self-contained: tokens and fonts are declared here,
   scoped to .pn-footer, so it never restyles the host page.
   ============================================================ */
.pn-footer {
  --pn-blu-50: #4E70D9;
  background: #1050ad; color: #fff; padding: 80px 0 32px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* Product pages render a fixed bottom CTA bar on mobile, and the footer is the
     last thing on the page — without this the bar sits on top of the legal links.
     The script at the end of core/price_ninja_footer.html measures whichever bar
     the page happens to use and publishes its height here; it stays 0px when no
     bar exists or the bar is display:none (i.e. on desktop), so every other page
     keeps the plain 32px. */
  padding-bottom: calc(32px + var(--pn-sticky-cta-h, 0px));
}
/* The markup tags the inner wrapper with `pn-container`, but that class lives in
   style.css, which is only loaded on the Price Ninja home page. Everywhere else
   (SERP, shops, support, sitemap, My Best Shopping List) the footer would stretch
   edge to edge and the legal paragraphs would eat the whole row. Restate the
   container here so the footer stays self-contained, as this file promises. */
.pn-footer__inner { width: 100%; max-width: 1140px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 32px; }
.pn-footer__top { display: flex; gap: 32px; align-items: stretch; }
.pn-footer__brand { flex: 0 0 auto; }
.pn-footer__logo { width: 170px; height: auto; display: block; }
.pn-footer__logo--horizontal { display: none; width: 200px; }
.pn-footer__vr { width: 1px; background: var(--pn-blu-50); flex: 0 0 auto; }
.pn-footer__col { display: flex; flex-direction: column; gap: 4px; width: 90px; flex: 0 0 auto; }
.pn-footer__col h3 { font-size: 20px; font-weight: 600; margin: 0 0 4px; color: #fff; font-family: 'Zalando Sans', 'Inter', system-ui, -apple-system, sans-serif; }
.pn-footer__col a { color: #fff; font-size: 16px; text-decoration: none; }
.pn-footer__col a:hover { text-decoration: underline; }
.pn-footer__legal-block { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.pn-footer__legal { color: #bbbfbc; font-size: 14px; line-height: 1.5; margin: 0; }
.pn-footer__hr { height: 1px; background: var(--pn-blu-50); width: 100%; }
.pn-footer__bottom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; }
.pn-footer__copyright { color: #fff; font-size: 14px; margin: 0; }
.pn-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pn-footer__links a { color: #fff; font-size: 14px; text-decoration: none; }
.pn-footer__links a:hover { text-decoration: underline; }
@media (max-width: 991.98px) {
  .pn-footer { padding-top: 40px; }
  .pn-footer__top { flex-direction: column; gap: 24px; }
  .pn-footer__vr { display: none; }
  .pn-footer__logo--stacked { display: none; }
  .pn-footer__logo--horizontal { display: block; }
  .pn-footer__col { width: 100%; gap: 0; }
  .pn-footer__col h3 { margin: 0 0 8px; }
  .pn-footer__col a { padding: 14px 0; border-bottom: 1px solid var(--pn-blu-50); }
  .pn-footer__col a:first-of-type { border-top: 1px solid var(--pn-blu-50); }
  .pn-footer__legal-block { flex: 0 0 auto; width: 100%; }
}