/* site-desktop.css — desktop treatment for the mobile-first judged design (2026-07-07).
   The judged mocks are 390px-native; unconstrained on a wide screen every percent-based
   section stretched edge-to-edge ("hero covers the whole page, roams freely" — Malcolm).
   Treatment: centered app column on the brand navy. Overlay file on purpose — the judged
   hp.css/starmap.css/about.css stay byte-identical to what passed the blind bar. */

/* Logo bump, all viewports (Malcolm 2026-07-07: "logo needs to be bigger and fit well") */
.hp-logo { width: 11rem; }
.hp-header { padding: 1.4rem 2rem; }

/* PDP "Updated — see your poster" pill (reference mechanic) + step-top landing */
#sm-updated-pill { position: fixed; top: 8.2rem; left: 50%; transform: translateX(-50%); z-index: 40; display: none; background: #0e1626; color: #fff; border: 1px solid rgba(255,255,255,0.3); border-radius: 999px; padding: 1rem 1.8rem; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.03em; box-shadow: 0 6px 18px rgba(0,0,0,0.35); cursor: pointer; white-space: nowrap; }
#sm-updated-pill.sm-pill-on { display: block; }
.sm-steps { scroll-margin-top: 7.6rem; }
/* personal message as poster title: bound long messages to two caption lines */
.sm-cap-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; }

/* Homepage live configurator suggestion dropdown (site.js) */
.hp-configurator label { position: relative; display: block; }
.hp-config-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #0e1626; border: 1px solid rgba(255,255,255,0.18); border-radius: 0.4rem; max-height: 22rem; overflow: auto; }
.hp-config-suggest div { padding: 1.1rem 1.4rem; font-size: 1.5rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.08); cursor: pointer; }
.hp-config-suggest div:last-child { border-bottom: 0; }
.hp-config-suggest:empty { display: none; }

/* Burger nav drawer (site.js injects .hf-menu after the header) */
.hf-menu { background: var(--navy-deep); padding: 0.4rem 2rem 1.8rem; display: flex; flex-direction: column; gap: 1.3rem; }
.hf-menu a { color: #fff; text-decoration: none; font-size: 1.6rem; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,0.14); padding-bottom: 1.1rem; }
.hf-menu[hidden] { display: none !important; }

/* Blind-judge round 2026-07-07 (B-flaws): PDP footer was slate #8a90a0 straight after the
   navy trustbar = colour-family collision; shield icon read orphaned; "35" in "From £35"
   read lighter than the £. PDP-scoped (body.pdp) so the judged homepage stays untouched. */
.pdp .hp-footer { background: #0e1626; }
.pdp .hp-footer-badge { display: none; }
.sm-from strong, .sm-from strong span { color: rgb(18, 24, 36); font-weight: 700; }

@media (min-width: 768px) {
  body {
    background: #0e1626;
  }
  /* every top-level block becomes part of one centered column */
  body > header,
  body > nav,
  body > main,
  body > form,
  body > section,
  body > div,
  body > footer {
    width: 100%;
    max-width: 52rem;
    margin-left: auto;
    margin-right: auto;
  }
  .hp-logo { width: 13rem; }
}