/* Footer — ported from ~/Desktop/marroma/app.js `footer()` (app.js:244-255), `payments()`
 * (app.js:242) and ~/Desktop/marroma/styles.css:184-204 (`.site-footer`, `.footer-grid`,
 * `.footer-side`, `.footer-social`, `.footer-phone`, `.footer-brand`, `.footer-bottom`,
 * `.payments`), plus the ≤1150px block at styles.css:339 and the ≤800px block at
 * styles.css:367-368 (`.site-footer`, `.footer-grid`, `.footer-brand img`).
 *
 * The template's `.site-footer{margin-top:96px}` (and the 64px ≤800px value) is NOT ported:
 * a section root's margin sits outside every section's painted area, and the platform drops
 * the `body{background:var(--paper)}` rule that coloured it in the static site, so the margin
 * rendered as a band of browser white above the footer on every page. The footer's own
 * `padding` supplies the same breathing room inside the paper area instead. Also drops
 * `body[data-page="home"] .site-footer{margin-top:0}` (styles.css:185), a body-scoped rule
 * tied to the static site's per-page `data-page` attribute, which has no equivalent here.
 *
 * The template's `.site-footer{font-family:var(--ui)}` block: styles.css:4's dropped `body`
 * rule sets the site-wide baseline, but the platform's own global `* { font-family }` beats
 * anything only inherited, so `.site-footer` restates its family and adds the `* { inherit }`
 * escape hatch (constraints.md "Fonts reach the text"). */

.cc_Ne0s275pCZ_LDCVhFz5eW .site-footer {
  background: var(--paper);
  color: var(--ink);
  margin-top: 0;
  padding: 64px var(--gutter) 28px;
  border-top: 1px solid var(--line);
  min-height: calc(100vh - var(--chrome-h));
  min-height: calc(100dvh - var(--chrome-h));
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 48px;
  font-size: 14px;
  font-family: var(--ui);
}

.cc_Ne0s275pCZ_LDCVhFz5eW .site-footer * {
  font-family: inherit;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(240px, 1fr);
  gap: 40px;
  align-items: start;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid nav {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 2px;
  color: var(--muted);
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid h2 {
  /* h2, not h3 (SEO audit 2026-10-13: no h2 sat between a product page's h1 and these). Undo
     global.css's display-heading defaults so it still looks like the template's h3 label. */
  font-family: inherit;
  line-height: inherit;
  text-wrap: wrap;
  width: 100%;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid a, .cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  text-align: left;
  line-height: 1.35;
}

/* styles.css:217 — the "coming soon" entry (a link saved with the URL `#`). */
.cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid .soon {
  color: var(--accent);
  gap: 8px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid .soon small {
  font-size: 11px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .site-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-side {
  justify-self: end;
  align-self: start;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-social .icon-button {
  color: var(--ink);
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-social .icon-button:hover {
  color: var(--ink);
  opacity: 0.6;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

/* styles.css:22 baseline is `svg{width:22px;height:22px}`; this rule (styles.css:203)
 * overrides it down to 18px for the phone icon specifically. */
.cc_Ne0s275pCZ_LDCVhFz5eW .footer-phone svg {
  width: 18px;
  height: 18px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-phone:hover {
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-brand {
  display: grid;
  gap: 10px;
  justify-items: start;
}

/* `.logo`/`.logo img` (src/global.css:239-240) already give the wrapped Wordmark the
 * 250px width and multiply blend mode `.footer-brand img` calls for; only the wordmark's
 * ~2.1% baked-in left-bearing nudge is footer-specific. */
.cc_Ne0s275pCZ_LDCVhFz5eW .footer-brand .logo img {
  transform: translateX(-2.1%);
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-brand p {
  color: var(--muted);
  font-size: 13px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 26px;
  margin-top: -20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.02em;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .payments {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .payments svg {
  height: 30px;
  width: auto;
  padding: 6px 8px;
  /* Literal from the template — styles.css:203 `.payments img{...background:#fff}`.
     Pure white on purpose: the card marks need a white chip, not `--paper` (#fff9f7). */
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.cc_Ne0s275pCZ_LDCVhFz5eW .payments svg.pay-visa {
  padding: 9px 8px;
}

@media (max-width: 1150px) {
  .cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 32px;
  }
  .cc_Ne0s275pCZ_LDCVhFz5eW .footer-side {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 800px) {
  .cc_Ne0s275pCZ_LDCVhFz5eW .site-footer {
    margin-top: 0;
    gap: 28px;
    padding: 36px var(--gutter) 16px;
    font-size: 14px;
  }
  .cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
  }
  .cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid a, .cc_Ne0s275pCZ_LDCVhFz5eW .footer-grid span {
    min-height: 28px;
  }
  .cc_Ne0s275pCZ_LDCVhFz5eW .footer-side {
    grid-column: 1 / -1;
  }
  .cc_Ne0s275pCZ_LDCVhFz5eW .footer-brand .logo {
    width: 220px;
  }
}

/* Round 2 (2026-09-22): on phones the viewport fill above reads as a blank band under the
 * footer content (Android Chrome's dvh grows as the URL bar collapses), so the footer is only
 * as tall as its content there. */
@media (max-width: 800px) {
  .cc_Ne0s275pCZ_LDCVhFz5eW .site-footer {
    min-height: 0;
  }
}