/* Hoisted from the design's inline styles. Declarations are copied
   verbatim; only the :hover rules are new, because the export's
   `style-hover` attribute has no inline equivalent. */

/* --- design base (from the export's <helmet>) --- */


/* --- element rules --- */
.sf-footer-1 { background:#F5F1FD;border-radius:80px 80px 0 0;color: var(--ink-600);font-family:'Poppins',sans-serif;margin-top:40px; }
.sf-footer-2 { max-width:1200px;margin:0 auto;padding:80px 24px 0; }
.sf-footer-3 { display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:48px; }
.sf-footer-4 { margin-bottom:26px; }
.sf-footer-5 { height:34px;width:auto;display:block; }
.sf-footer-6 { font-size: var(--text-sm);line-height:1.7;color: var(--ink-500);margin:0;max-width:400px; }
.sf-footer-7 { display:flex;gap:20px;margin-top:40px; }
.sf-footer-8 { width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--color-primary); }
.sf-footer-9 { display:flex;flex-direction:column;gap:10px; }
.sf-footer-10 { display:inline-flex;align-items:center;gap:10px;font-size: var(--text-base);color: var(--ink-600);text-decoration:none;margin-bottom:24px; }
.sf-footer-11 { color:var(--color-primary); }
.sf-footer-12 { display:flex;gap:12px;margin-bottom:28px; }
.sf-footer-13 { color:var(--color-primary);font-size: var(--text-lg); }
.sf-footer-14 { font-size: var(--text-sm);color: var(--ink-400);line-height:1.7;margin:0; }
.sf-footer-17 { display:flex;align-items:center;justify-content:center;gap:30px;flex-wrap:wrap;margin-top:80px;margin-bottom:24px; }
.sf-footer-18 { max-width:66px;max-height:30px;object-fit:contain; }
.sf-footer-19 { border:none;border-top:1px solid #e6e6e6;margin:0; }
.sf-footer-20 { font-size: var(--text-xs);color: var(--ink-400);text-align:center;padding:15px 0 22px; }

/* The column heading and link were inline style objects on the component. */
.sf-footer-heading {
  color: var(--ink-800);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin: 0 0 24px;
}

.sf-footer-link {
  text-decoration: none;
  font-weight: var(--weight-body);
  font-size: var(--text-base);
  color: var(--ink-600);
}

/* --- Mobile: fold the 4-column grid to 2 columns (tablet) then 1 (phone),
   shrink the rounded top-radius so the footer doesn't look like a giant
   bowl, and take the payment badges + brand blurb down a notch. */
@media (max-width: 992px) {
  .sf-footer-1 { border-radius: 40px 40px 0 0; }
  .sf-footer-2 { padding: 56px 20px 0; }
  .sf-footer-3 {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .sf-footer-17 { margin-top: 48px; gap: 20px; }
}

@media (max-width: 575px) {
  .sf-footer-1 { border-radius: 32px 32px 0 0; }
  .sf-footer-2 { padding: 40px 16px 0; }
  .sf-footer-3 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sf-footer-6 { max-width: none; }
  .sf-footer-7 { margin-top: 20px; }
  .sf-footer-17 {
    gap: 16px;
    margin-top: 32px;
  }
  .sf-footer-18 { max-height: 24px; }
  .sf-footer-heading { margin-bottom: 12px; }
}

/* --- Checkout flow: payment marks + copyright only ---------------------------
   `SiteFooter`'s `minimal` drops the four columns, and with them goes the
   reason for the bowl and its lead-in: an 80px radius and 80px of padding
   framing two rows of logos read as a giant curve under the pay button, with
   the page unfinished above it (owner, 2026-09-18).
   Doubled class so it beats the responsive radius/padding rules above at every
   width, wherever they sit in the file. */
.sf-footer-1.sf-footer--flow { border-radius: 0; margin-top: 0; }
.sf-footer-1.sf-footer--flow .sf-footer-2 { padding-top: 0; }
.sf-footer-1.sf-footer--flow .sf-footer-17 { margin-top: 28px; }