/* =====================================================================
   Shop header (navigation.php) — matches the homepage "Vault" nav.

   The shop pages (shop / product_details / checkout / order_history) do not
   load vault.css, and pulling that whole design system in would restyle their
   buttons and cards. So this file carries ONLY the header, every class
   prefixed `sn-`, with the Vault tokens inlined. Same white bar, same
   hairline border, same cobalt pill, same type.
   ===================================================================== */
.sn {
  --sn-ink: #0C1B3A;
  --sn-muted: #4E5B78;
  --sn-line: rgba(12, 27, 58, .10);
  --sn-brand: #1466E0;
  position: sticky; top: 0; z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--sn-line);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sn.is-stuck { box-shadow: 0 2px 16px -8px rgba(12, 27, 58, .22); }
.sn *, .sn *::before, .sn *::after { box-sizing: border-box; }
.sn a { text-decoration: none; }

.sn__in {
  display: flex; align-items: center; gap: 18px;
  max-width: 1320px; margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 40px);
}

.sn__brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--sn-ink); font-family: "Archivo", system-ui, sans-serif; font-weight: 700;
}
.sn__brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; display: block; }
.sn__brand span { font-size: 17px; }

.sn__links { display: flex; gap: 22px; margin-left: 14px; }
.sn__links a { color: var(--sn-muted); font-size: 14.5px; font-weight: 600; }
.sn__links a:hover, .sn__links a.is-active { color: var(--sn-ink); }

.sn__cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.sn__cta [data-sn] { display: flex; align-items: center; gap: 14px; }
.sn__cta [hidden] { display: none !important; }

.sn__cart {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--sn-ink); font-size: 14.5px; font-weight: 700;
}
.sn__cart i { font-size: 19px; line-height: 1; }
.sn__cart:hover { color: var(--sn-brand); }

.sn__signin { color: var(--sn-muted); font-weight: 700; font-size: 14.5px; }
.sn__signin:hover { color: var(--sn-ink); }

.sn__btn {
  display: inline-flex; align-items: center;
  background: var(--sn-brand); color: #fff !important;
  font-weight: 700; font-size: 13.5px;
  padding: 10px 16px; border-radius: 999px;
  box-shadow: 0 12px 26px rgba(20, 102, 224, .4);
  transition: transform .15s ease;
}
.sn__btn:hover { transform: translateY(-2px); color: #fff; }

.sn__burger {
  display: none; background: none; border: 0; padding: 0;
  color: var(--sn-ink); font-size: 26px; line-height: 1; cursor: pointer;
}

.sn__mobile {
  display: none; flex-direction: column; gap: 4px;
  padding: 8px clamp(16px, 4vw, 40px) 18px;
  border-top: 1px solid var(--sn-line); background: #fff;
}
.sn__mobile.open { display: flex; }
.sn__mobile a { color: var(--sn-muted); font-weight: 600; padding: 12px 6px; border-bottom: 1px solid var(--sn-line); }
.sn__mobile a:last-child { border-bottom: 0; }
.sn__mobile [hidden] { display: none !important; }

@media (max-width: 860px) {
  .sn__links, .sn__cta [data-sn] { display: none; }
  .sn__cta { margin-left: auto; gap: 16px; }
  .sn__cart span { display: none; }      /* cart stays in the bar as an icon */
  .sn__burger { display: block; }
}

/* =====================================================================
   Compact storefront footer (partials/shop_footer.php)
   ===================================================================== */
.sf {
  background: #fff; border-top: 1px solid rgba(12, 27, 58, .10);
  font-family: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #4E5B78; margin-top: 8px;
}
.sf *, .sf *::before, .sf *::after { box-sizing: border-box; }
.sf a { text-decoration: none; color: inherit; }
.sf__in { max-width: 1320px; margin: 0 auto; padding: 22px clamp(16px, 4vw, 40px) 18px; }
.sf__top { display: flex; align-items: center; gap: 22px 28px; flex-wrap: wrap; }
.sf__brand { display: inline-flex; align-items: center; gap: 9px; font-family: "Archivo", system-ui, sans-serif; font-weight: 700; color: #0C1B3A; }
.sf__brand img { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; display: block; }
.sf__brand span { font-size: 15.5px; }
.sf__links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.sf__links a { font-size: 13px; font-weight: 600; color: #4E5B78; }
.sf__links a:hover { color: #0C1B3A; }
.sf__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(12, 27, 58, .08);
  font-size: 12px; color: #8791A8;
}
@media (max-width: 720px) {
  .sf__links { margin-left: 0; gap: 8px 16px; }
  .sf__top { gap: 14px; }
}

/* The collapsed SEO strip (partials/aeo_answer_block.php) sits between page content
   and this footer. On storefront pages line it up with the header, content and
   footer (same 1320px column and edge padding) instead of its own 960px box. */
.aeo-answer .aeo-answer__sum, .aeo-answer .aeo-answer__inner { max-width: 1320px; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }
.aeo-answer .aeo-answer__lead { max-width: 80ch; }