/**
 * Site-wide logo: header nav, footer, store checkout / success.
 * Asset: assets/logo-shoppe.png (add logo-shoppe.webp + <picture> when available).
 *
 * Light header bar: pages that only include this sheet rely on these rules;
 * inline page CSS may override — prefer matching white header + black links in each page.
 */
header .site-nav {
  background: #ffffff;
  border-bottom: 1px solid #e2e4e9;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.nav-links a {
  color: #111111;
}
.nav-links a:hover,
.nav-links a:focus-visible {
  color: #111111;
  opacity: 0.88;
  text-decoration: underline;
}
.nav-links a:focus-visible {
  outline: 3px solid #000abe;
  outline-offset: 3px;
  border-radius: 2px;
}

.nav-logo,
.footer-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}

.nav-logo__img {
  height: 40px;
  width: auto;
  max-width: min(240px, 52vw);
  display: block;
}

.footer-logo__img {
  height: 36px;
  width: auto;
  max-width: min(220px, 70vw);
  display: block;
}

/* Store SPA: cart, checkout, order thank-you */
.checkout-brand,
.cart-brand,
.success-brand {
  text-align: center;
  margin: 0 0 12px;
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--border, #e2e4e9);
}

.success-brand__logo {
  height: 48px;
  width: auto;
  max-width: min(260px, 85vw);
  display: inline-block;
  vertical-align: middle;
}

/* Cart + checkout: large hero logo above flow, still viewport-safe */
.checkout-brand .checkout-brand__logo,
.cart-brand .cart-brand__logo {
  height: auto;
  width: min(92vw, 520px);
  max-height: min(96px, 30vw);
  max-width: min(520px, 92vw);
  object-fit: contain;
  display: inline-block;
  vertical-align: middle;
}

.success-brand__logo {
  height: 56px;
  max-width: min(280px, 90vw);
}