:root {
  --nj-ink: #12282b;
  --nj-ink-soft: #3f5052;
  --nj-accent: #c97932;
  --nj-accent-dark: #a95e20;
  --nj-surface: #f6f4ef;
  --nj-surface-raised: #fff;
  --nj-border: #deded8;
  --nj-success: #2f7d55;
  --nj-radius-sm: .55rem;
  --nj-radius: 1rem;
  --nj-shadow: 0 18px 48px rgba(18, 40, 43, .10);
  --nj-shell: 1240px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--nj-ink); background: var(--nj-surface-raised); font: 400 16px/1.6 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: .08em; text-underline-offset: .18em; }
button, input, select, textarea { font: inherit; }
button, .button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0 0 .65em; line-height: 1.15; letter-spacing: -.025em; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; margin: .5rem; padding: .75rem 1rem; z-index: 100000; background: #fff; }
.content-shell { width: min(var(--nj-shell), calc(100% - 2rem)); margin-inline: auto; padding-block: 3rem 5rem; }
.prose { max-width: 78ch; }
.prose > * + * { margin-top: 1em; }
.prose li + li { margin-top: .45em; }

.site-header { position: relative; z-index: 40; border-bottom: 1px solid var(--nj-border); background: rgba(255,255,255,.97); }
.site-header__inner { width: min(var(--nj-shell), calc(100% - 2rem)); min-height: 78px; margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; }
.custom-logo { max-height: 58px; width: auto; }
.site-branding__name { font-weight: 800; text-decoration: none; }
.primary-navigation__list, .primary-navigation__list ul { list-style: none; margin: 0; padding: 0; }
.primary-navigation__list { display: flex; justify-content: center; align-items: center; gap: 1.6rem; }
.primary-navigation a { display: block; padding: 1.6rem 0; font-size: .94rem; font-weight: 650; text-decoration: none; }
.primary-navigation li { position: relative; }
.primary-navigation .sub-menu { position: absolute; left: -.9rem; top: calc(100% - .5rem); min-width: 240px; padding: .6rem; opacity: 0; visibility: hidden; transform: translateY(.5rem); background: #fff; border: 1px solid var(--nj-border); border-radius: var(--nj-radius-sm); box-shadow: var(--nj-shadow); transition: .18s ease; }
.primary-navigation li:hover > .sub-menu, .primary-navigation li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.primary-navigation .sub-menu a { padding: .65rem .75rem; border-radius: .35rem; }
.primary-navigation .sub-menu a:hover { background: var(--nj-surface); }
.site-header__actions { display: flex; align-items: center; gap: .8rem; }
.header-search-toggle { border: 0; background: transparent; font-weight: 650; }
.site-cart { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem .8rem; color: #fff; background: var(--nj-ink); border-radius: 999px; text-decoration: none; font-weight: 700; }
.site-cart__count { min-width: 1.35rem; min-height: 1.35rem; display: grid; place-items: center; color: var(--nj-ink); background: #fff; border-radius: 50%; font-size: .75rem; }
.header-search { position: absolute; inset: 100% 0 auto; padding: 1rem max(1rem, calc((100% - var(--nj-shell))/2)); background: #fff; border-bottom: 1px solid var(--nj-border); box-shadow: 0 10px 25px rgba(0,0,0,.08); }
.header-search form { display: flex; }
.header-search input[type="search"] { flex: 1; min-height: 48px; padding: .7rem 1rem; border: 1px solid var(--nj-border); }
.header-search button { min-width: 120px; border: 0; color: #fff; background: var(--nj-ink); }
.menu-toggle { display: none; width: 44px; height: 44px; border: 0; background: transparent; }
.menu-toggle > span:not(.screen-reader-text) { display: block; width: 24px; height: 2px; margin: 5px auto; background: var(--nj-ink); }

.site-footer { color: #e8eeee; background: var(--nj-ink); }
.site-footer__inner { width: min(var(--nj-shell), calc(100% - 2rem)); margin-inline: auto; padding-block: 3.5rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.site-footer a { color: inherit; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer__brand { color: #fff; font-size: 1.25rem; }
.site-footer__legal { padding: 1rem; border-top: 1px solid rgba(255,255,255,.14); text-align: center; font-size: .85rem; }

@media (max-width: 980px) {
  .site-header__inner { grid-template-columns: auto auto 1fr; gap: .8rem; }
  .menu-toggle { display: block; }
  .primary-navigation { position: absolute; inset: 100% 0 auto; display: none; max-height: calc(100vh - 78px); overflow: auto; padding: 1rem; background: #fff; border-bottom: 1px solid var(--nj-border); box-shadow: var(--nj-shadow); }
  .primary-navigation.is-open { display: block; }
  .primary-navigation__list { display: block; }
  .primary-navigation a { padding: .7rem .5rem; }
  .primary-navigation .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 0 1rem; }
  .site-header__actions { justify-content: flex-end; }
  .header-search-toggle { display: none; }
}

@media (max-width: 620px) {
  .site-header__inner { min-height: 66px; }
  .custom-logo { max-height: 48px; }
  .site-cart > span:first-child { display: none; }
  .site-footer__inner { grid-template-columns: 1fr; }
}