/* ---------------------------------------------------------------------------
   The header, the same on every page.

   Each page carries its own stylesheet under its own prefix (.wf, .wfm,
   .wfmap, .wfb ...), and every one had drifted: four different basket
   buttons, five nav heights, a white promo strip on one page and a dark one
   everywhere else, an un-inverted logo on the basket page.

   This file is loaded on every page and wins over all of them. Every value
   below was measured off index.html as it renders, not copied from a rule -
   index is the reference. Everything is scoped to .topdark, so nothing
   outside the header is affected.

   Change the header here, once.
--------------------------------------------------------------------------- */

.topdark{
  background:linear-gradient(180deg,#0e1c3d 0%,#0a1530 100%) !important;
  border-bottom:0 !important;
}

/* the strip across the very top */
.topdark .promo{
  background:transparent !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
  color:#9db0d4 !important;
  font:600 12.5px/12.5px 'Inter',sans-serif !important;
  letter-spacing:.5px !important;
  text-align:center !important;
  padding:10px 16px !important;
  margin:0 !important;
}
.topdark .promo b{color:#e7bf51 !important;font-weight:900 !important}

/* contained, and lined up with the page below */
.topdark .wrap{
  max-width:1240px !important;
  margin:0 auto !important;
  padding:0 24px !important;
}

.topdark nav{
  display:flex !important;
  align-items:center !important;
  gap:28px !important;
  padding:22px 0 !important;
  min-height:0 !important;
}

.topdark nav .logo{
  height:34px !important;
  width:auto !important;
  display:block !important;
  filter:brightness(0) invert(1) !important;
}

.topdark nav .links a{
  color:#9db0d4 !important;
  font:600 14px 'Inter',sans-serif !important;
  text-decoration:none !important;
}
.topdark nav .links a:hover{color:#fff !important}

/* the basket: the gold button, everywhere */
.topdark .basket{
  margin-left:auto !important;
  margin-right:0 !important;
  display:inline-block !important;
  background:linear-gradient(180deg,#f2d27a,#e7bf51) !important;
  color:#241c00 !important;
  border:0 !important;
  border-radius:10px !important;
  padding:10px 18px !important;
  font:700 14px/normal 'Inter',sans-serif !important;
  letter-spacing:normal !important;
  text-decoration:none !important;
  white-space:nowrap !important;
  box-shadow:0 10px 30px -10px rgba(231,191,81,.5) !important;
}
.topdark .basket:hover{filter:brightness(1.05)}

/* ---------- phone menu ----------
   Below 860px the links hide and this button opens them as a list. It was
   styled inline on every page except the basket, where the button rendered
   unstyled - a 94px grey block reading "Menu" sitting next to the logo. */
.topdark .wnav-t{display:none;margin-left:auto;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:9px;
  padding:9px 12px;color:#c6d4ea;font:700 11.5px 'Inter',sans-serif;letter-spacing:.11em;
  text-transform:uppercase}
.topdark .wnav-t:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.topdark .wnav-t svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.topdark .wnav-t .x{display:none}
.topdark nav.wnav-open .wnav-t .x{display:block}
.topdark nav.wnav-open .wnav-t .b{display:none}
@media (max-width:860px){
  .topdark .wnav-t{display:inline-flex}
  .topdark nav{flex-wrap:wrap}
  .topdark nav .links{display:none !important}
  .topdark nav.wnav-open .links{display:flex !important;flex-direction:column;align-items:stretch;
    gap:0;width:100%;order:9;margin-top:12px;padding-top:6px;
    border-top:1px solid rgba(255,255,255,.14)}
  .topdark nav.wnav-open .links a{padding:13px 2px;font-size:15.5px !important;
    border-bottom:1px solid rgba(255,255,255,.07)}
  .topdark nav.wnav-open .links a:last-child{border-bottom:0}
}
@media (max-width:520px){
  .topdark nav{gap:12px !important}
  .topdark .wnav-t{padding:9px 11px}
  .topdark .wnav-t span{display:none}
}

/* ---------- footer ----------
   Same width and spacing on every page. Colour still follows the page: grey on
   the light pages, light on the dark ones (market, sealed, card, basket). */
footer{padding:40px 0 48px !important}
footer .wrap{max-width:1240px !important;margin:0 auto !important;padding:0 24px !important}
footer .wrap.row{display:flex !important;justify-content:space-between !important;
  align-items:center !important;gap:16px !important;flex-wrap:wrap}
footer .links{display:flex !important;gap:22px !important;flex-wrap:wrap}
footer .links a{font-size:13.5px !important;text-decoration:none}

/* the basket page had no footer; it sits on the dark theme */
footer.site-foot-dark{border-top:1px solid rgba(255,255,255,.13);color:#8195ba;
  font:13.5px 'Inter',sans-serif;margin-top:40px}
footer.site-foot-dark .links a{color:#9db0d4}
footer.site-foot-dark .links a:hover{color:#fff}
/* the basket footer sits inside that page's padded container, so drop the
   wrap's own padding or its content starts 24px further in than every other */
footer.site-foot-dark .wrap{padding:0 !important}

/* the address line: the email in it follows the footer's own colour */
footer .wrap.row > div:first-child a{color:inherit !important;text-decoration:none}
footer .wrap.row > div:first-child a:hover{text-decoration:underline}

/* the cards we take, in the footer and under the basket button */
.paycards{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.paycards svg{width:40px;height:25px;display:block;border-radius:4px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
footer .paycards{margin-top:10px}

/* ---------- phones (mobile pass, 18 Oct 2026) ---------- */
@media (max-width:760px){
  /* under 16px, iPhone zooms the whole page when a field is tapped */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{font-size:16px !important}
  /* footer links tall enough to hit with a thumb */
  footer .links{gap:2px 20px !important}
  footer .links a{display:inline-flex;align-items:center;min-height:40px}
  footer .wrap.row > div:first-child a{display:inline-block;padding:8px 0}
}