/* ==========================================================================
   Nutrimend IQ — storefront
   Order: 1. Font + tokens + base   2. .nn-header   3. .nn-hero
          4. .nn-features           5. .nn-categories   6. .nn-howto
          7. .nn-products           8. .nn-featured     9. .nn-blog
          10. .nn-reels             11. .nn-footer
          12. Catalogue, article, review, basket and document pages
          13. Responsive

   The nn- sections are the approved design, kept close to the file it was
   delivered as so the two can still be diffed. Everything after §12 is the
   part of the shop the design did not cover; it is aliased onto the same
   tokens so it does not read as a different website.
   ========================================================================== */


/* ==========================================================================
   1. FONT + TOKENS + BASE
   ========================================================================== */

/* Montserrat variable font, latin subset, self-hosted (SIL Open Font License,
   see app/assets/fonts). Self-hosted rather than fetched from Google: a shop
   should not hand every visitor's IP address to a third party to draw its own
   name, and the font cannot disappear from under us. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/montserrat-latin-wght-normal-9fa5e944.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --nn-black: #000;
  --nn-ink: #17130d;
  --nn-ink-soft: #40392e;
  --nn-gold: #c9a24a;
  --nn-gold-light: #e3c377;
  --nn-cream: #f3eee5;
  --nn-cream-deep: #e3dccd;
  --nn-white: #fff;

  --nn-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nn-container: 1320px;
  --nn-gutter: clamp(1rem, 4vw, 2.5rem);

  /* Aliases for the pages the design did not cover - the catalogue, the
     article, the basket. They were built against these names, and pointing
     them at the nn- palette is what keeps the whole shop one brand while
     those pages are restyled one at a time. */
  --gold: var(--nn-gold);
  --gold-dark: #b08d38;
  --gold-bright: var(--nn-gold-light);
  --gold-soft: var(--nn-gold-light);
  --ink: var(--nn-ink);
  --ink-soft: var(--nn-ink-soft);
  --body: var(--nn-ink-soft);
  --muted: #6b6255;
  --white: var(--nn-white);
  --surface: var(--nn-cream);
  --line: #e2ded4;

  --container: var(--nn-container);
  --gutter: var(--nn-gutter);
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: .18s var(--ease);
  --t: .32s var(--ease);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--nn-font);
  line-height: 1.5;
  color: var(--nn-ink);
  background: var(--nn-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; }

/* An author rule beats the hidden attribute, so it is restored here once and
   for the whole sheet. Two components have already been drawn over the page by
   forgetting this. */
[hidden] { display: none !important; }

/* Text for screen readers only. Both spellings exist because the layout and
   the design were written apart from each other. */
.nn-visually-hidden,
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  padding: .75rem 1.25rem;
  background: var(--nn-gold);
  color: #000;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
  outline: 3px solid #000;
  outline-offset: -3px;
}

#main:focus { outline: none; }

/* Anchor jumps should not land under the sticky header */
[id] { scroll-margin-top: 6rem; }

/* The inline SVG symbol sheet. Present in the document, never drawn - without
   this the whole set of icons prints down the top of every page. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.container {
  width: 100%;
  max-width: var(--nn-container);
  margin-inline: auto;
  padding-inline: var(--nn-gutter);
}

.section { padding: clamp(3rem, 5.2vw, 6.25rem) 0; }
.pt-0 { padding-top: 0; }

/* Image slot. Every picture on the site reserves its box at final size, so a
   slow or missing image never moves the layout under somebody's cursor. */
.ph {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: var(--ph-bg, #e8e6e0);
  background-image: repeating-linear-gradient(45deg, var(--ph-line, rgba(0,0,0,.05)) 0 6px, transparent 6px 14px);
}

.ph--dark { --ph-bg: rgba(255,255,255,.07); --ph-line: rgba(255,255,255,.08); }

/* The stripes mark a slot with nothing in it yet. Once a picture is there they
   are noise - and they showed straight through every product shot, which is
   contained rather than cropped and so never covers its whole box. */
.ph:has(> img),
.ph:has(> picture),
.ph:has(> video) { background-image: none; }
.ph > img, .ph > picture, .ph > video { width: 100%; height: 100%; object-fit: cover; }
.ph--contain > img { object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* ==========================================================================
   2. HEADER  (.nn-header)
   ========================================================================== */
.nn-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nn-black);
  color: var(--nn-white);
}

.nn-header :focus-visible {
  outline: 3px solid var(--nn-gold-light);
  outline-offset: 3px;
}

/* --- Top alert banner --- */
.nn-header__banner {
  padding: 0.625rem var(--nn-gutter);
  background: var(--nn-gold);
  border-bottom: 1px solid rgba(201, 162, 74, .35);
}

.nn-header__banner-text {
  margin: 0;
  text-align: center;
  color: var(--nn-black);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.8px;
}

/* --- Main bar --- */
.nn-header__bar {
  position: relative;
  background: var(--nn-black);
}

.nn-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: none;
  min-height: 5.625rem;
  margin-inline: auto;
  padding: .625rem clamp(1rem, 2.7vw, 3.25rem);
}

/* --- Hamburger (mobile + tablet) --- */
.nn-header__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: -.625rem;
  padding: 0;
  border: 0;
  border-radius: .25rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.nn-header__toggle-bar,
.nn-header__toggle-bar::before,
.nn-header__toggle-bar::after {
  display: block;
  width: 1.5rem;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, background-color .25s ease;
}

.nn-header__toggle-bar {
  position: relative;
}

.nn-header__toggle-bar::before,
.nn-header__toggle-bar::after {
  content: "";
  position: absolute;
  left: 0;
}

.nn-header__toggle-bar::before { top: -7px; }
.nn-header__toggle-bar::after  { top: 7px; }

/* Turns into an X when the menu is open */
.nn-header__toggle[aria-expanded="true"] .nn-header__toggle-bar {
  background: transparent;
}

.nn-header__toggle[aria-expanded="true"] .nn-header__toggle-bar::before {
  transform: translateY(7px) rotate(45deg);
}

.nn-header__toggle[aria-expanded="true"] .nn-header__toggle-bar::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Navigation: drop-down panel on mobile + tablet --- */
.nn-header__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: .25rem var(--nn-gutter) 1.5rem;
  background: var(--nn-black);
  border-top: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 18px 24px rgba(0, 0, 0, .4);
  /* visibility:hidden also removes the links from the tab order when closed */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

.nn-header__nav.is-open {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.nn-header__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nn-header__link {
  display: block;
  padding: 1rem 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: var(--nn-white);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}

.nn-header__link:hover {
  color: var(--nn-gold-light);
}

.nn-header__menu-button {
  align-items: center;
  gap: .5rem;
  width: 100%;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.nn-header__chevron {
  width: .625rem;
  height: .4375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}

.nn-header__item--has-menu.is-open .nn-header__chevron {
  transform: rotate(180deg);
}

.nn-header__submenu {
  display: none;
  margin: 0;
  padding: .25rem 0 .5rem 1rem;
  list-style: none;
}

.nn-header__item--has-menu.is-open .nn-header__submenu {
  display: block;
}

.nn-header__submenu a {
  display: block;
  padding: .625rem 0;
  color: var(--nn-cream-deep);
  font-size: .875rem;
  text-decoration: none;
}

.nn-header__submenu a:hover {
  color: var(--nn-gold-light);
}

/* --- Logo (always centered) --- */
.nn-header__logo {
  position: absolute;
  left: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  color: var(--nn-white);
  text-decoration: none;
  transform: translateX(-50%);
}

.nn-header__ctas {
  display: none;
  align-items: center;
  gap: 1.625rem;
  margin-left: auto;
}

.nn-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.75rem;
  padding: .75rem 1.5rem;
  border: 1px solid var(--nn-gold);
  color: var(--nn-gold-light);
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.nn-header__cta--primary {
  min-width: 8.35rem;
  background: var(--nn-gold);
  color: #000;
}

.nn-header__cta--outline {
  min-width: 12.8rem;
}

.nn-header__cta:hover {
  background: var(--nn-gold-light);
  color: #000;
}

.nn-header__logo-mark {
  width: 1.625rem;
  height: auto;
  color: var(--nn-gold);
}

.nn-header__logo-text {
  font-size: clamp(.6875rem, 3.4vw, .9rem);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Icons --- */
.nn-header__actions {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 1.25rem;
}

.nn-header__action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: 2.25rem;
  height: 2.25rem; */
  padding: 0;
  border: 0;
  border-radius: .25rem;
  background: transparent;
  color: var(--nn-white);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease;
}

.nn-header__action:hover {
  color: var(--nn-gold-light);
}

.nn-header__icon {
  width: 1.375rem;
  height: 1.375rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The action is the tap target as well as the box the glyph sits in. The
   design left it to the icon's own size, which at phone width was 13px - too
   small to hit and too small to read. */
/* The glyph may shrink; the thing you tap may not. 44px is the smallest
   target a thumb finds reliably, and these were 28px on a phone. */
.nn-header__action { width: 2rem; height: 2rem; min-width: 2.75rem; min-height: 2.75rem; }

/* --- Market switcher ---
   Not in the delivered design, which assumed one country. The shop sells into
   five, so the choice has to be reachable at every width - and it is the
   control that decides which prices the whole page shows. Compact rather than
   dropped on small screens: hiding it would leave a visitor stuck in whichever
   market they first landed in. */
/* Out of the bar on a phone and into the menu, which is where the compact
   mobile header leaves room for it. Nobody changes market mid-scroll, and as a
   22px-high control in the bar it was both crowded and too small to tap. */
.nn-header__market-drawer { display: none; }

.nn-header__market-drawer .nn-header__market-select {
  width: 100%;
  min-height: 2.75rem;
  font-size: .9375rem;
  padding: .5rem .75rem;
}

@media (max-width: 767.84px) {
  .nn-header__actions .nn-header__market { display: none; }
  .nn-header__market-drawer { display: block; }
}

.nn-header__market {
  display: inline-flex;
  align-items: center;
  flex: none;
}

.nn-header__market-select {
  padding: .25rem .4rem;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: .25rem;
  background: transparent;
  color: var(--nn-white);
  font: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
}

.nn-header__market-select option { color: var(--nn-ink); }

.nn-header__market-go {
  margin-left: .375rem;
  padding: .25rem .5rem;
  border: 1px solid var(--nn-gold);
  background: var(--nn-gold);
  color: #000;
  font-size: .75rem;
  cursor: pointer;
}

/* The design's search box was a panel that dropped out of the header when a
   magnifier was pressed. It is now a box that lives in the bar, so its rules
   are in §18 alongside the suggestions it drives - these were still painting
   a gold rectangle around the new one. */

/* ==========================================================================

/* ==========================================================================
   3. HERO  (.nn-hero)
   ========================================================================== */
.nn-hero {
  position: relative;
  min-height: clamp(32rem, 52vw, 40rem);
  /* overflow: hidden; */
  color: #fff;
  /* soft light from the top right on a cream-to-grey base */
  /* background:
    radial-gradient(60% 70% at 85% 15%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 65%),
    linear-gradient(135deg, var(--nn-cream) 0%, var(--nn-cream-deep) 100%); */
    background: transparent;
}

.hero-banner{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  height: 100%;
}
.hero-banner img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nn-hero :focus-visible {
  outline: 3px solid var(--nn-ink);
  outline-offset: 3px;
}

.nn-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: inherit;
  /* max-width: var(--nn-container); */
  margin-inline: auto;
  /* no bottom padding: the pedestal sits on the section edge */
  padding: 0 8.125rem;
  /* row-gap: 2.5rem; */
}

/* --- Text side --- */
/* .nn-hero__content {
  max-width: 45.5625rem;
} */

.nn-hero__title {
  margin: 0 0 1.25rem;
  font-size: clamp(2.5rem, 7.5vw, 4.5rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.nn-hero__text {
  /* max-width: 28rem; */
  margin: 0 0 2rem;
  color: #fff;
  font-size: clamp(1.0625rem, 2.4vw, 2rem);
  line-height: 1.55;
}

.nn-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.nn-hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .75rem 2rem;
  border: 1px solid #fff;
  border-radius: 0.1875rem;
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.nn-hero__btn--outline:hover {
  background: var(--nn-ink);
  color: var(--nn-white);
}

.nn-hero__btn--primary {
  background: var(--nn-gold);
  border-color: var(--nn-gold);
  color: #000;
}

.nn-hero__btn--primary:hover {
  background: var(--nn-gold-light);
  border-color: var(--nn-gold-light);
}

/* --- Product side --- */
.nn-hero__media {
  align-self: end;
  justify-self: center;
  /* width: 100%; */
  max-width: 40rem;
}

.nn-hero__image {
  width: 100%;
  height: auto;
}

/* SVG text uses the same font as the page */
.nn-hero__image text {
  font-family: var(--nn-font);
}

/* ==========================================================================

/* ==========================================================================
   4. FEATURES BAR  (.nn-features)
   Base = static, centered, wrapping badges (no JS / reduced motion).
   JS adds .is-animated and turns it into a looping ticker.
   ========================================================================== */
.nn-features {
  position: relative;
  overflow: hidden;
  background: var(--nn-white);
  color: var(--nn-ink);
  border-block: 1px solid var(--nn-ink);
}

.nn-features :focus-visible {
  outline: 3px solid var(--nn-ink);
  outline-offset: 2px;
}

.nn-features__marquee {
  padding-block: clamp(1rem, 2.4vw, 1.75rem);
  overflow: hidden;
}

/* The pause control is absolutely positioned over the right end of the band,
   and overflow:hidden clips at the padding edge - so padding did not move the
   claims out from under it. A margin does: the scrolling box now ends before
   the button, and the button sits in the gap.
   Only while animated; a static wrapping row has nothing to pause. */
.nn-features.is-animated .nn-features__marquee {
  margin-right: calc(2.5rem + 2 * var(--nn-gutter));
  /* Fading the edges stops a claim being sliced mid-letter as it leaves. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3rem, #000 calc(100% - 3rem), transparent);
}

.nn-features__track {
  display: flex;
}

.nn-features__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: .25rem;
  width: 100%;
  margin: 0;
  padding: 0 var(--nn-gutter);
  list-style: none;
}

.nn-features__item {
  display: flex;
  align-items: center;
  padding-inline: clamp(.75rem, 3vw, 2.75rem);
  font-size: clamp(.8125rem, .6rem + .75vw, 1.25rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Small gold dot before each badge */
.nn-features__item::before {
  content: "";
  flex: none;
  width: .32em;
  height: .32em;
  margin-right: .6em;
  border-radius: 50%;
  background: var(--nn-gold);
  transform: translateY(0);
}

/* --- Ticker mode --- */
.nn-features.is-animated .nn-features__track {
  width: max-content;
  animation: nn-features-scroll var(--nn-features-duration, 40s) linear infinite;
  will-change: transform;
}

.nn-features.is-animated .nn-features__list {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: auto;
  padding: 0;
}

.nn-features.is-animated .nn-features__marquee:hover .nn-features__track,
.nn-features.is-paused .nn-features__track {
  animation-play-state: paused;
}

@keyframes nn-features-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(var(--nn-features-shift, -50%)); }
}

/* --- Pause / play button --- */
.nn-features__toggle {
  position: absolute;
  top: 50%;
  right: var(--nn-gutter);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--nn-ink);
  border-radius: 50%;
  background: var(--nn-white);
  color: var(--nn-ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .2s ease, color .2s ease;
}

.nn-features__toggle[hidden] {
  display: none;
}

.nn-features__toggle:hover {
  background: var(--nn-ink);
  color: var(--nn-white);
}

.nn-features__toggle-icon {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nn-features__toggle-icon--play {
  display: none;
  fill: currentColor;
}

.nn-features__toggle[aria-pressed="true"] .nn-features__toggle-icon--pause {
  display: none;
}

.nn-features__toggle[aria-pressed="true"] .nn-features__toggle-icon--play {
  display: block;
}


/* ==========================================================================

/* ==========================================================================
   5. SHOP BY HEALTH NEED  (.nn-categories)
   ========================================================================== */
.nn-categories {
  /* Tile shape: 0 = square (matches the design). Use 50% for round avatars. */
  --nn-cat-radius: 0;

  /* Slides per view + gap BEFORE Swiper starts (stops layout jump).
     Keep these in sync with the breakpoints in js/main.js */
  --nn-cat-spv: 1.5;
  --nn-cat-gap: .75rem;

  overflow: hidden; /* slides bleed to the screen edge, but never cause a sideways scroll */
  padding-block: clamp(3rem, 6vw, 6.375rem);
  background: var(--nn-white);
  color: var(--nn-ink);
}

.nn-categories :focus-visible {
  outline: 3px solid var(--nn-ink);
  outline-offset: 3px;
}

/* --- Heading --- */
.nn-categories__head {
  margin: 0 auto clamp(2rem, 3.5vw, 3.125rem);
  padding-inline: var(--nn-gutter);
  text-align: center;
}

.nn-categories__title {
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 600;
  line-height: 1.40;
  letter-spacing: -.01em;
}

.nn-categories__text {
  max-width: 75rem;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1.7vw, 2rem);
  line-height: 1.4;
}

/* --- Slider --- */
.nn-categories__slider {
  /* JS updates this to the real image height so the arrows sit at the image middle */
  --nn-cat-media-h: 12rem;

  position: relative;
  width: min(100% - 2 * var(--nn-gutter), 97.5rem);
  margin-inline: auto;
}

/* Let slides show outside the box (the peek on both sides) */
.nn-categories__swiper {
  overflow: visible;
}

.nn-categories__slide {
  width: calc((100% - (var(--nn-cat-spv) - 1) * var(--nn-cat-gap)) / var(--nn-cat-spv));
  margin-right: var(--nn-cat-gap);
}

.nn-categories__link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.nn-categories__media {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--nn-cat-radius);
  background: var(--nn-cream-deep);
}

.nn-categories__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.nn-categories__label {
  display: block;
  margin-top: clamp(.75rem, 1.25vw, 1.5rem);
  font-size: clamp(1.125rem, 1.7vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
  transition: text-decoration-color .2s ease;
}

.nn-categories__link:hover .nn-categories__label,
.nn-categories__link:focus-visible .nn-categories__label {
  text-decoration-color: var(--nn-gold);
}

/* --- Arrows --- */
.nn-categories__arrow {
  position: absolute;
  top: calc(var(--nn-cat-media-h) / 2);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 3.2vw, 3.75rem);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--nn-gold);
  border-radius: 50%;
  background: var(--nn-gold);
  color: #000;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .2s ease, opacity .2s ease;
}

.nn-categories__arrow--prev { left: -2.5rem; }
.nn-categories__arrow--next { right: -2.5rem; }

.nn-categories__arrow:hover {
  background: var(--nn-gold-light);
  border-color: var(--nn-gold-light);
}

/* aria-disabled keeps the button focusable, so keyboard focus is not lost at the end */
.nn-categories__arrow[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}

.nn-categories__arrow[aria-disabled="true"]:hover {
  background: var(--nn-gold);
  border-color: var(--nn-gold);
}

.nn-categories__arrow-icon {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Nothing to scroll: hide arrows */
.nn-categories__slider.is-locked .nn-categories__arrow {
  display: none;
}

/* --- Button --- */
.nn-categories__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 3.5vw, 3.5rem);
  padding-inline: var(--nn-gutter);
}

.nn-categories__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3rem, 3.2vw, 3.75rem);
  padding: .75rem clamp(1.5rem, 1.7vw, 2rem);
  border: 1px solid var(--nn-gold);
  background: var(--nn-gold);
  color: #000;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.nn-categories__btn:hover {
  background: var(--nn-gold-light);
  border-color: var(--nn-gold-light);
}

/* --- If Swiper fails to load: plain swipe / scroll list --- */
.nn-categories.is-static .nn-categories__swiper {
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}

.nn-categories.is-static .nn-categories__slide {
  scroll-snap-align: start;
  flex-shrink: 0;
}

.nn-categories.is-static .nn-categories__arrow {
  display: none;
}

/* ==========================================================================

/* ==========================================================================
   6. HOW IT WORKS  (.nn-howto)
   ========================================================================== */
.nn-howto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8.3vw, 10rem);
  background: #111;
  color: var(--nn-white);
}

.nn-howto :focus-visible {
  outline: 3px solid var(--nn-gold-light);
  outline-offset: 3px;
}

/* Photo + dark layer (keeps the white text readable on any photo) */
.nn-howto__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.nn-howto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .80);
}

.nn-howto__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
  width: min(100% - 2 * var(--nn-gutter), 97.5rem);
  margin-inline: auto;
}

/* --- Left: heading + button --- */
.nn-howto__title {
  max-width: 10em;
  margin: 0;
  font-size: clamp(1.875rem, 2.7vw, 3.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.nn-howto__text {
  max-width: 12em;
  margin: clamp(.75rem, 1.2vw, 1.4rem) 0 0;
  font-size: clamp(1.125rem, 1.8vw, 2.125rem);
  font-weight: 400;
  line-height: 1.1;
}

.nn-howto__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3rem, 3.2vw, 3.75rem);
  margin-top: clamp(1.5rem, 1.9vw, 2.25rem);
  padding: .75rem clamp(1.5rem, 1.9vw, 2.3rem);
  border: 1px solid var(--nn-gold);
  background: var(--nn-gold);
  color: #000;
  font-size: clamp(1rem, 1.1vw, 1.3125rem);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.nn-howto__btn:hover {
  background: var(--nn-gold-light);
  border-color: var(--nn-gold-light);
}

/* --- Right: 3 steps --- */
.nn-howto__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nn-howto__step {
  display: grid;
  grid-template-columns: clamp(2.75rem, 3.5vw, 4.2rem) minmax(0, 1fr);
  padding-block: clamp(1.25rem, 1.9vw, 2.25rem);
}

.nn-howto__step:first-child {
  padding-top: 0;
}

.nn-howto__step:last-child {
  padding-bottom: 0;
}

.nn-howto__step + .nn-howto__step {
  border-top: 1px solid rgba(255, 255, 255, .85);
}

.nn-howto__num,
.nn-howto__step-title {
  grid-row: 1;
  align-self: baseline;
  font-size: clamp(1.25rem, 1.8vw, 2.125rem);
  line-height: 1.2;
}

.nn-howto__num {
  grid-column: 1;
  color: var(--nn-gold);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.nn-howto__step-title {
  grid-column: 2;
  margin: 0;
  font-weight: 600;
}

.nn-howto__step-text {
  grid-column: 2;
  grid-row: 2;
  max-width: 22.7em;
  margin: clamp(.375rem, .7vw, .75rem) 0 0;
  font-size: clamp(.9375rem, 1.1vw, 1.3125rem);
  line-height: 1.2;
}

/* ==========================================================================

/* ==========================================================================
   7. PRODUCTS  (.nn-products)
   ========================================================================== */
.nn-products {
  --nn-products-gap: clamp(1rem, 2vw, 2.375rem);

  padding: clamp(3rem, 4.2vw, 5rem) 0 clamp(3rem, 5.2vw, 6.25rem);
  background: var(--nn-white);
  color: var(--nn-ink);
}

.nn-products :focus-visible {
  outline: 3px solid var(--nn-ink);
  outline-offset: 3px;
}

/* --- Heading --- */
.nn-products__head {
  margin: 0 auto clamp(2rem, 3.1vw, 3.75rem);
  padding-inline: var(--nn-gutter);
  text-align: center;
}

.nn-products__title {
  margin: 0 0 .75rem;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.nn-products__text {
  max-width: 75rem;
  margin: 0 auto;
  font-size: clamp(1.0625rem, 1.7vw, 2rem);
  line-height: 1.4;
}

/* --- Grid: 1 column phone, 2 tablet, 3 desktop. A lone last card stays centered. --- */
.nn-products__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--nn-products-gap);
  width: min(100% - 2 * var(--nn-gutter), 104.75rem);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.nn-products__item {
  flex: 0 1 100%;
  max-width: 30rem;
}

/* --- Card (AOS sits on the <li>, so the hover lift here never fights AOS) --- */
.nn-products__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.25rem, 1.9vw, 2.25rem);
  border-radius: clamp(1rem, 1.25vw, 1.5rem);
  background: #f1efeb;
  transition: transform .3s ease, box-shadow .3s ease;
}

.nn-products__card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(23, 19, 13, .12);
}

@media (hover: hover) {
  .nn-products__card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(23, 19, 13, .12);
  }
}

/* --- Image + description --- */
.nn-products__media {
  position: relative;
}

.nn-products__pic {
  display: block;
  aspect-ratio: 1 / 1;
}

.nn-products__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .35s ease;
}

/* Description sits over the image and shows on hover / focus */
.nn-products__desc {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12%;
  font-size: clamp(.9375rem, 1.1vw, 1.3125rem);
  line-height: 1.15;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}

.nn-products__card:focus-within .nn-products__desc {
  opacity: 1;
}

.nn-products__card:focus-within .nn-products__img {
  opacity: .12;
}

@media (hover: hover) {
  .nn-products__card:hover .nn-products__desc {
    opacity: 1;
  }

  .nn-products__card:hover .nn-products__img {
    opacity: .12;
  }
}

/* Touch screens have no hover: show the description as normal text under the image */
@media (hover: none) {
  /* .nn-products__desc {
    position: static;
    display: block;
    padding: 0;
    margin-top: .75rem;
    font-size: .9375rem;
    line-height: 1.4;
    text-align: left;
    opacity: 1;
  } */

  .nn-products__card:focus-within .nn-products__img {
    opacity: 1;
  }
}

/* --- Name + price --- */
/* Stacked, not a row.
   Name and price shared a line with space-between, which collided the moment a
   card got narrow: the name wrapped, the price was crowded against it and at
   some widths ran off the card. Neither can crowd the other in a column. */
.nn-products__info {
  display: grid;
  gap: .25rem;
  margin-bottom: clamp(1rem, 1.4vw, 1.75rem);
}

.nn-products__name {
  margin: 0;
  min-width: 0;
  font-size: clamp(1rem, 1.15vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
}

.nn-products__name-link {
  color: inherit;
  text-decoration: none;
  display: inline;
}

.nn-products__name-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--nn-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: .25em;
}

.nn-products__price {
  margin: 0;
  font-size: clamp(1rem, 1.15vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

/* --- Button (sits at the bottom, so all 3 line up) --- */
.nn-products__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  min-width: clamp(8.5rem, 11vw, 13.25rem);
  min-height: clamp(3rem, 3.2vw, 3.75rem);
  margin-top: auto;
  margin-bottom: clamp(0rem, 1vw, 1.125rem);
  padding: .75rem 1.5rem;
  border: 1px solid var(--nn-gold);
  background: var(--nn-gold);
  color: #000;
  font-size: clamp(1rem, 1.1vw, 1.3125rem);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.nn-products__btn:hover {
  background: var(--nn-gold-light);
  border-color: var(--nn-gold-light);
}


/* ==========================================================================

/* ==========================================================================
   8. FEATURED SPLIT BANNER  (.nn-featured)
   Mobile: photo on top, tilted bottle overlapping, text below.
  Desktop (1024px+): photo left with slanted edge, bottle in the middle, text right.
   ========================================================================== */
.nn-featured {
  --nn-amber: #d4a94a;

  position: relative;
  overflow: hidden;
  background: var(--nn-amber);
  color: #000;
}

.nn-featured :focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

.nn-featured__slide {
  display: flex;
  flex-direction: column;
}

/* --- Photo --- */
.nn-featured__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}

.nn-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Bottle: "rotate" and "translate" are separate properties, so AOS (which uses "transform") never fights them --- */
.nn-featured__bottle {
  position: relative;
  z-index: 2;
  width: clamp(9rem, 42vw, 16rem);
  margin: clamp(-9rem, -20vw, -4.5rem) auto 0;
  rotate: -14deg;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .35));
}

.nn-featured__bottle-img {
  width: 100%;
  height: auto;
}

/* --- Text --- */
.nn-featured__content {
  width: min(100% - 2 * var(--nn-gutter), 40rem);
  margin: 0 auto;
  padding: 1.5rem 0 6rem; /* bottom space keeps the text clear of the arrows */
  text-align: center;
}

.nn-featured__title {
  margin: 0;
  font-size: clamp(1.875rem, 3.33vw, 4rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.nn-featured__text {
  max-width: 18em;
  margin: clamp(.75rem, 1.1vw, 1.25rem) auto 0;
  font-size: clamp(1.0625rem, 1.8vw, 2.125rem);
  line-height: 1.3;
}

.nn-featured__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: clamp(9rem, 11vw, 13.25rem);
  min-height: clamp(3rem, 3.2vw, 3.75rem);
  margin-top: clamp(1.5rem, 2.6vw, 3.1rem);
  padding: .75rem 1.5rem;
  border: 1px solid #000;
  background: #000;
  color: var(--nn-white);
  font: inherit;
  font-size: clamp(1rem, 1.1vw, 1.3125rem);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.nn-featured__btn:hover {
  background: transparent;
  color: #000;
}

.nn-featured__btn:focus-visible {
  outline-color: #000;
  outline-offset: 4px;
}

/* --- Arrows --- */
.nn-featured__nav {
  position: absolute;
  right: max(var(--nn-gutter), calc((100% - 104.75rem) / 2));
  bottom: clamp(1rem, 3.5vw, 4.25rem);
  z-index: 5;
  display: flex;
  gap: clamp(.75rem, 1.3vw, 1.5625rem);
}

.nn-featured__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 3.2vw, 3.75rem);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #000;
  border-radius: 50%;
  background: transparent;
  color: #000;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.nn-featured__arrow:hover {
  background: #000;
  color: var(--nn-amber);
}

.nn-featured__arrow-icon {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- If Swiper fails to load: show the first slide only, hide arrows --- */
.nn-featured.is-static .nn-featured__slide:not(:first-child),
.nn-featured.is-static .nn-featured__nav {
  display: none;
}

/* ==========================================================================

/* Blog Section */

.nn-blog {
  /* ---- Settings you can change ---- */
  --nn-blog-accent: var(--nn-gold, #c9a24a);
  --nn-blog-accent-light: var(--nn-gold-light, #e3c377);
  --nn-blog-ink: var(--nn-ink, #17130d);
  --nn-blog-bg: #fff;
  --nn-blog-radius: 0;
  --nn-blog-ratio: 522 / 488;
  --nn-blog-max: 101.375rem;                                   /* 1622px */
  --nn-blog-gutter: var(--nn-gutter, clamp(1rem, 4vw, 2.5rem));
  --nn-blog-gap: clamp(1rem, 1.46vw, 1.75rem);
  --nn-blog-cols: 1;                                           /* changed by the breakpoints below */

  padding: clamp(3.5rem, 6.9vw, 8.25rem) 0 clamp(3rem, 5.7vw, 6.875rem);
  background: var(--nn-blog-bg);
  color: var(--nn-blog-ink);
}

.nn-blog *,
.nn-blog *::before,
.nn-blog *::after {
  box-sizing: border-box;
}

.nn-blog :focus-visible {
  outline: 3px solid var(--nn-blog-ink);
  outline-offset: 3px;
}

/* --- Heading --- */
.nn-blog__head {
  margin: 0 auto clamp(2rem, 2.8vw, 3.375rem);
  padding-inline: var(--nn-blog-gutter);
  text-align: center;
}

.nn-blog__heading {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* --- Grid --- */
.nn-blog__grid {
  display: grid;
  grid-template-columns: repeat(var(--nn-blog-cols), minmax(0, 1fr));
  gap: clamp(1.75rem, 2.5vw, 2.5rem) var(--nn-blog-gap);
  width: min(100% - 2 * var(--nn-blog-gutter), var(--nn-blog-max));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* --- Card --- */
.nn-blog__card {
  position: relative; /* the title link stretches over this box */
  height: 100%;
}

.nn-blog__media {
  overflow: hidden;
  aspect-ratio: var(--nn-blog-ratio);
  border-radius: var(--nn-blog-radius);
  background: #e9e5de;
}

.nn-blog__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.nn-blog__body {
  padding: clamp(1rem, 1.2vw, 1.4rem) clamp(.25rem, 2.24vw, 2.7rem) 0;
}

.nn-blog__title {
  margin: 0;
  font-size: clamp(1.0625rem, 1.15vw, 1.375rem);
  font-weight: 600;
  line-height: 1.45;
}

.nn-blog__link {
  color: inherit;
  text-decoration: none;
}

/* Makes the whole card clickable */
.nn-blog__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The focus ring is drawn around the whole card */
.nn-blog__link:focus-visible {
  outline: none;
}

.nn-blog__link:focus-visible::after {
  outline: 3px solid var(--nn-blog-ink);
  outline-offset: 3px;
}

.nn-blog__snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* long snippets are cut after 2 lines */
  overflow: hidden;
  margin: 0;
  font-size: clamp(1rem, 1.1vw, 1.3125rem);
  line-height: 1.4;
}

/* Hidden by default. Shown with .nn-blog--show-more */
.nn-blog__more {
  display: none;
  margin-top: .75rem;
  font-size: clamp(.9375rem, 1vw, 1.125rem);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--nn-blog-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: .3em;
}

.nn-blog--show-more .nn-blog__more {
  display: inline-block;
}

/* Hover (mouse only): soft image zoom + gold underline on the title */
@media (hover: hover) {
  .nn-blog__card:hover .nn-blog__img {
    transform: scale(1.04);
  }

  .nn-blog__card:hover .nn-blog__link {
    text-decoration: underline;
    text-decoration-color: var(--nn-blog-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: .25em;
  }
}

/* --- Button --- */
.nn-blog__footer {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 2.5vw, 3rem);
  padding-inline: var(--nn-blog-gutter);
}

.nn-blog__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3rem, 3.2vw, 3.75rem);
  padding: .75rem clamp(1.5rem, 1.9vw, 2.25rem);
  border: 1px solid var(--nn-blog-accent);
  background: var(--nn-blog-accent);
  color: #000;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease;
}

.nn-blog__btn:hover {
  background: var(--nn-blog-accent-light);
  border-color: var(--nn-blog-accent-light);
}

@media (prefers-reduced-motion: reduce) {
  .nn-blog__img,
  .nn-blog__btn {
    transition: none;
  }

  .nn-blog__card:hover .nn-blog__img {
    transform: none;
  }
}


/* ==========================================================================

/* ==========================================================================
   9. REELS / VIDEO TESTIMONIALS  (.nn-reels)
   ========================================================================== */
.nn-reels {
  --nn-reels-radius: clamp(1rem, 1.15vw, 1.375rem);

  /* Slides per view + gap BEFORE Swiper starts (stops layout jump).
     Keep in sync with the breakpoints in js/main.js */
  --nn-reels-spv: 1.6;
  --nn-reels-gap: .75rem;

  overflow: hidden;
  padding: clamp(3rem, 5.2vw, 6.25rem) 0 clamp(3.5rem, 7.5vw, 9rem);
  background: var(--nn-white);
  color: var(--nn-ink);
}

.nn-reels :focus-visible {
  outline: 3px solid var(--nn-ink);
  outline-offset: 3px;
}

/* --- Heading --- */
.nn-reels__head {
  margin: 0 auto clamp(2rem, 4.2vw, 5rem);
  padding-inline: var(--nn-gutter);
  text-align: center;
}

.nn-reels__title {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* --- Slider --- */
.nn-reels__slider {
  /* JS sets this to the real image height, so arrows sit in the middle of the image */
  --nn-reels-media-h: 14rem;

  position: relative;
  width: min(100% - 2 * var(--nn-gutter), 101.5rem);
  margin-inline: auto;
}

/* Phones + tablets show a peek of the next card, so the box must not clip */
.nn-reels__swiper {
  overflow: visible;
}

.nn-reels__slide {
  width: calc((100% - (var(--nn-reels-spv) - 1) * var(--nn-reels-gap)) / var(--nn-reels-spv));
  margin-right: var(--nn-reels-gap);
}

/* --- Card: thin outline, photo on top, product row below --- */

/* Every card the height of the tallest, so the row has one bottom edge. A
   product name that wraps to three lines rather than two made its card 13px
   taller than its neighbours, and a shelf whose cards end at different heights
   reads as a rendering fault. The photo keeps its aspect ratio and the slack
   falls below the product row, where there is nothing to misalign. */
.nn-reels__slide {
  height: auto;
}

.nn-reels__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(23, 19, 13, .7);
  border-radius: var(--nn-reels-radius);
  background: var(--nn-white);
}

.nn-reels__media {
  position: relative;
  flex: none;
  overflow: hidden;
  aspect-ratio: 19 / 30;
  margin: -1px -1px 0; /* photo covers the outline on top and sides */
  border-radius: var(--nn-reels-radius);
  background: var(--nn-cream-deep);
}

.nn-reels__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

/* Hover (mouse only): the thumbnail scales up inside its frame */
@media (hover: hover) {
  .nn-reels__card:hover .nn-reels__img {
    transform: scale(1.06);
  }
}

/* --- Play button ---
   The icon centres itself. There used to be a .nn-reels__play wrapper doing
   it, styled here and rendered by nothing: the markup makes the whole photo
   one link and puts the icon straight inside it. So the icon sat after an
   <img> that fills the frame, landed below it, and was clipped away by the
   overflow - a play button that existed in the stylesheet and on no page. */
.nn-reels__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(2.75rem, 2.6vw, 3.125rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--nn-white);
  color: var(--nn-ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .2);
  transition: transform .3s ease;
}

.nn-reels__play-icon svg {
  width: 36%;
  height: 36%;
  margin-left: 8%; /* the triangle looks centered only when moved a little right */
  fill: currentColor;
}

@media (hover: hover) {
  .nn-reels__media:hover .nn-reels__play-icon {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

/* Two-tone ring: visible on both dark and light photos */
.nn-reels__media:focus-visible .nn-reels__play-icon {
  box-shadow: 0 0 0 3px var(--nn-ink), 0 0 0 6px var(--nn-white);
}

/* --- Product row --- */
.nn-reels__product {
  display: flex;
  align-items: center;
  gap: clamp(.625rem, .8vw, 1rem);
  padding: clamp(.75rem, 1vw, 1.15rem) clamp(1rem, 1.46vw, 1.75rem);
  color: inherit;
  text-decoration: none;
}

.nn-reels__thumb {
  flex: none;
  width: auto;
  height: clamp(3.5rem, 4.3vw, 5.1rem);
}

.nn-reels__info {
  display: block;
  min-width: 0;
}

.nn-reels__name,
.nn-reels__price {
  display: block;
  font-size: clamp(.875rem, .75vw, .9375rem);
  font-weight: 600;
  line-height: 1.15;
}

.nn-reels__price {
  margin-top: .25rem;
}

.nn-reels__product:hover .nn-reels__name {
  text-decoration: underline;
  text-decoration-color: var(--nn-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

/* --- Arrows --- */
.nn-reels__arrow {
  position: absolute;
  top: calc(var(--nn-reels-media-h) / 2);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.75rem, 3.2vw, 3.75rem);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--nn-gold);
  border-radius: 50%;
  background: var(--nn-gold);
  color: #000;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background-color .2s ease, opacity .2s ease;
}

.nn-reels__arrow--prev { left: .5rem; }
.nn-reels__arrow--next { right: .5rem; }

.nn-reels__arrow:hover {
  background: var(--nn-gold-light);
  border-color: var(--nn-gold-light);
}

/* aria-disabled keeps the button focusable, so keyboard focus is not lost at the ends */
.nn-reels__arrow[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
}

.nn-reels__arrow[aria-disabled="true"]:hover {
  background: var(--nn-gold);
  border-color: var(--nn-gold);
}

.nn-reels__arrow-icon {
  width: 45%;
  height: 45%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.nn-reels__slider.is-locked .nn-reels__arrow {
  display: none;
}

/* --- Video pop-up (native <dialog>) --- */
.nn-reels__dialog {
  width: min(92vw, 24rem);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--nn-reels-radius);
  background: #000;
  color: var(--nn-white);
}

.nn-reels__dialog::backdrop {
  background: rgba(0, 0, 0, .78);
}

.nn-reels__dialog-inner {
  position: relative;
}

.nn-reels__video {
  display: block;
  width: 100%;
  max-height: 84vh;
  aspect-ratio: 9 / 16;
  background: #000;
}

.nn-reels__video[hidden],
.nn-reels__note[hidden] {
  display: none;
}

.nn-reels__note {
  margin: 0;
  padding: 4rem 1.5rem;
  text-align: center;
}

.nn-reels__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--nn-white);
  color: #000;
  cursor: pointer;
}

.nn-reels__close svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.nn-reels__dialog :focus-visible {
  outline: 3px solid var(--nn-gold-light);
  outline-offset: 3px;
}

/* --- If Swiper fails to load: plain swipe / scroll list --- */
.nn-reels.is-static .nn-reels__swiper {
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x mandatory;
}

.nn-reels.is-static .nn-reels__slide {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.nn-reels.is-static .nn-reels__arrow {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .nn-reels__card:hover .nn-reels__img {
    transform: none;
  }

  /* Still centred - only the scale is dropped. transform: none here would
     throw the icon back to the corner. */
  .nn-reels__media:hover .nn-reels__play-icon {
    transform: translate(-50%, -50%);
  }
}


/* ==========================================================================

/* ==========================================================================
   10. FOOTER  (.nn-footer)
   Mobile: everything stacked. 80em+: two rows like the design
   (newsletter | divider | links, then FDA note | logo | legal).
   ========================================================================== */
.nn-footer {
  --nn-footer-bg: #2a2a2a;
  --nn-footer-line: rgba(255, 255, 255, .55);
  --nn-footer-logo-w: 14.9rem; /* keeps the divider and the columns lined up with the logo */

  background: var(--nn-footer-bg);
  color: var(--nn-white);
}

.nn-footer :focus-visible {
  outline: 3px solid var(--nn-gold-light);
  outline-offset: 3px;
}

.nn-footer a {
  color: inherit;
}

.nn-footer__inner {
  width: min(100% - 2 * var(--nn-gutter), 100.25rem);
  margin-inline: auto;
  padding-block: clamp(3rem, 5.1vw, 6.125rem) clamp(2.5rem, 4.9vw, 5.875rem);
}

/* --- Newsletter --- */
.nn-footer__newsletter {
  max-width: 37.8rem; /* 605px */
}

.nn-footer__heading {
  margin: 0 0 1.25rem;
  font-size: clamp(1.125rem, 1.15vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
}

/* The pill is the border, so the focus ring is drawn around the whole pill */
.nn-footer__field {
  display: flex;
  align-items: center;
  min-height: clamp(3.25rem, 3.2vw, 3.875rem);
  border: 1px solid var(--nn-white);
  border-radius: 999px;
}

.nn-footer__field:focus-within {
  outline: 3px solid var(--nn-gold-light);
  outline-offset: 3px;
}

.nn-footer__input {
  flex: 1;
  min-width: 0;
  padding: .5rem 1rem .5rem clamp(1.25rem, 1.4vw, 1.7rem);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--nn-white);
  font: inherit;
  font-size: clamp(1rem, 1.15vw, 1.375rem);
  font-weight: 500;
}

.nn-footer__input:focus {
  outline: none;
}

.nn-footer__input::placeholder {
  color: var(--nn-white);
  opacity: 1;
}

.nn-footer__input[aria-invalid="true"] {
  text-decoration: underline wavy #ffb3a7;
  text-underline-offset: .2em;
}

.nn-footer__submit {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: clamp(.5rem, 2.7vw, 3.25rem);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nn-white);
  cursor: pointer;
}

.nn-footer__submit-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .25s ease;
}

.nn-footer__submit:hover .nn-footer__submit-icon {
  transform: translateX(4px);
}

.nn-footer__msg {
  margin: .625rem 0 0;
  padding-left: clamp(1.25rem, 1.4vw, 1.7rem);
  color: var(--nn-gold-light);
  font-size: .875rem;
  line-height: 1.4;
}

.nn-footer__msg:empty {
  display: none;
}

.nn-footer__msg.is-error {
  color: #ffb3a7;
}

.nn-footer__note {
  max-width: 29rem;
  margin: 1rem 0 0;
  font-size: .8125rem;
  line-height: 1.25;
}

.nn-footer__note-link {
  text-decoration: underline;
}

.nn-footer__note-link:hover {
  color: var(--nn-gold-light);
}

/* --- Social icons --- */
.nn-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: .125rem;
  margin: 2.5rem 0 0;
  padding: 0;
  list-style: none;
}

.nn-footer__social-link {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .25rem;
  transition: color .2s ease;
}

.nn-footer__social-link:hover {
  color: var(--nn-gold-light);
}

.nn-footer__social-icon {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

/* Instagram is drawn with lines */
.nn-footer__social-icon--line {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.nn-footer__social-dot {
  fill: currentColor;
  stroke: none;
}

/* --- Link columns --- */
.nn-footer__col-title,
.nn-footer__link {
  font-size: clamp(.9375rem, .9vw, 1.0625rem);
  line-height: 1.9;
}

.nn-footer__col-title {
  margin: 0;
  font-weight: 600;
}

.nn-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nn-footer__link {
  display: inline-block;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.nn-footer__link:hover {
  color: var(--nn-gold-light);
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* --- Bottom row: logo, FDA note, legal --- */
.nn-footer__logo {
  order: -1; /* on phones the logo comes first (the FDA note has no links, so tab order stays the same) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  color: var(--nn-white);
  text-decoration: none;
}

.nn-footer__logo-mark {
  width: 4.4rem;
  height: auto;
}

.nn-footer__logo-text {
  font-size: clamp(1.25rem, 1.35vw, 1.625rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The two small gold dashes under the logo */
/* .nn-footer__logo::after {
  content: "";
  width: 3.75rem;
  height: 2px;
  background: linear-gradient(90deg, var(--nn-gold) 0 42%, transparent 42% 58%, var(--nn-gold) 58% 100%);
} */

.nn-footer__fda {
  max-width: 33rem;
  margin: 0;
  padding: .8125rem;
  border: 1px solid var(--nn-white);
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: left;
}

.nn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
}

.nn-footer__legal-link {
  font-weight: 600;
  text-decoration: none;
}

.nn-footer__legal-link:hover {
  color: var(--nn-gold-light);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.nn-footer__copy {
  font-weight: 500;
}

.nn-footer__legal-link--brand {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .2em;
}




/* ==========================================================================
   12. PAGES THE HOME-PAGE DESIGN DID NOT COVER
   The catalogue, the product page, Learn, the basket and the document pages.
   Written in the same language as the nn- sections above and reusing its card
   components, so the shop is one design rather than a front page with a
   different website behind it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   12.1 Page head — the dark band a listing opens with
   -------------------------------------------------------------------------- */
.nn-pagehead {
  padding-block: clamp(2.75rem, 5.2vw, 5.5rem);
  background: var(--nn-black);
  color: var(--nn-white);
  text-align: center;
}

.nn-pagehead__inner {
  width: min(100% - 2 * var(--nn-gutter), 52rem);
  margin-inline: auto;
}

.nn-pagehead__eyebrow {
  margin: 0 0 .625rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nn-gold);
}

.nn-pagehead__title {
  margin: 0;
  font-size: clamp(2rem, 3.5vw, 4rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.nn-pagehead__text {
  margin: clamp(.625rem, 1vw, 1rem) 0 0;
  font-size: clamp(1rem, 1.4vw, 1.375rem);
  line-height: 1.5;
  color: var(--nn-cream-deep);
}

/* --------------------------------------------------------------------------
   12.2 Filter chips
   -------------------------------------------------------------------------- */
.nn-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .625rem;
  width: min(100% - 2 * var(--nn-gutter), var(--nn-container));
  margin: 0 auto clamp(2rem, 3.2vw, 3rem);
}

.nn-chips__chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.375rem;
  padding: 0 1.125rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--nn-white);
  font-size: .875rem;
  font-weight: 600;
  color: var(--nn-ink);
  white-space: nowrap;
  transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast);
}

.nn-chips__chip:hover { border-color: var(--nn-gold); }

.nn-chips__chip.is-active {
  background: var(--nn-ink);
  border-color: var(--nn-ink);
  color: var(--nn-white);
}

/* --------------------------------------------------------------------------
   12.3 Listing shell, grids and the empty state
   -------------------------------------------------------------------------- */
.nn-listing { padding-block: clamp(2.5rem, 4.2vw, 4rem) clamp(3rem, 5.2vw, 6.25rem); }

/* The home page's product card, on its own page. The only difference is that
   a listing wraps onto as many rows as it needs. */
/* min() so a card can never be wider than its column - without it a narrow
   phone gets a horizontal scrollbar rather than a narrower card. Two across
   at phone width: the home page shows three cards and can afford one column,
   a listing of thirty-four cannot. */
/* Four across at most, not as many as fit.
   auto-fill gave six on a wide screen, which made every card small enough
   that the product photograph stopped being the thing you noticed. The count
   is stated per width instead, and the container is narrowed so four cards are
   a comfortable size rather than four stretched across 1676px. */
/* A grid item defaults to min-width:auto, which is the width of its longest
   unbreakable word - so a product called "B12 Methylcobalamin" widened its own
   track and pushed the page sideways at 320px. The track is allowed to shrink
   and the name is allowed to break. */
.nn-products__item { min-width: 0; }

.nn-products__name-link,
.nn-products__name { overflow-wrap: anywhere; }

.nn-listing__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2.375rem);
  width: min(100% - 2 * var(--nn-gutter), 82rem);
  margin-inline: auto;
}

/* One column on the smallest phones.
   Two columns at 320px leaves 96px inside a card, and the buy button is an
   <input>, whose text cannot wrap - so it could not shrink to fit and pushed
   the page sideways. A card that narrow is unreadable anyway. */
@media (max-width: 22.4375em) {
  .nn-listing__products { grid-template-columns: minmax(0, 1fr); }
}

@media (min-width: 48em) {
  .nn-listing__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 75em) {
  .nn-listing__products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.nn-listing__articles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.75rem, 2.5vw, 2.5rem) clamp(1rem, 1.46vw, 1.75rem);
  width: min(100% - 2 * var(--nn-gutter), 101.375rem);
  margin-inline: auto;
}

.nn-empty {
  width: min(100% - 2 * var(--nn-gutter), 38rem);
  margin-inline: auto;
  padding: clamp(2.5rem, 4vw, 3.5rem) 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-cream);
  text-align: center;
}

.nn-empty__title { margin: 0; font-size: 1.375rem; font-weight: 600; color: var(--nn-ink); }
.nn-empty__text { margin: .75rem 0 0; color: var(--nn-ink-soft); line-height: 1.6; }

/* --------------------------------------------------------------------------
   12.4 Pager
   Previous, next and where you are. A shopper does not need a page-size
   selector, and the ends stay in place so the control does not jump.
   -------------------------------------------------------------------------- */
.nn-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 1.6vw, 1.5rem);
  width: min(100% - 2 * var(--nn-gutter), var(--nn-container));
  margin: clamp(2.5rem, 3.6vw, 3.5rem) auto 0;
  padding-top: clamp(1.5rem, 2vw, 2rem);
  border-top: 1px solid var(--line);
}

.nn-pager__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 1.125rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--nn-ink);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.nn-pager__link:hover { border-color: var(--nn-gold); background: var(--nn-cream); }
.nn-pager__link.is-disabled { opacity: .35; pointer-events: none; }
.nn-pager__icon { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nn-pager__status { font-size: .875rem; color: var(--muted); }

/* --------------------------------------------------------------------------
   12.5 Product page
   -------------------------------------------------------------------------- */
.nn-pdp { padding-block: clamp(2rem, 4vw, 4.5rem); background: var(--nn-cream); }

.nn-pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.75rem, 3.4vw, 3.5rem);
  align-items: center;
  width: min(100% - 2 * var(--nn-gutter), var(--nn-container));
  margin-inline: auto;
}

.nn-pdp__media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-pdp__img { width: 100%; height: 100%; object-fit: contain; }

.nn-pdp__brand {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.nn-pdp__title {
  margin: .5rem 0 0;
  font-size: clamp(1.875rem, 3.2vw, 3.25rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.nn-pdp__price {
  margin: clamp(.75rem, 1.2vw, 1.125rem) 0 0;
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  font-weight: 700;
}

.nn-pdp__rating { display: flex; align-items: center; gap: .625rem; margin-top: .625rem; }
.nn-pdp__stars { color: var(--gold-dark); letter-spacing: .15em; }
.nn-pdp__rating-link { font-size: .875rem; color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }

.nn-pdp__summary {
  margin: clamp(1rem, 1.5vw, 1.375rem) 0 0;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.65;
  color: var(--nn-ink-soft);
}

.nn-pdp__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }

.nn-pdp__badges li {
  padding: .4375rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--nn-white);
  font-size: .75rem;
  font-weight: 700;
  color: var(--nn-ink);
}

.nn-pdp__details { padding-block: clamp(2.5rem, 4.2vw, 4.5rem); }

/* align-items: start so a short panel does not stretch to match a tall one -
   with three panels the description grew into a mostly empty box the height
   of the specification beside it. */
/* Columns rather than a grid.
   A grid puts panels of very different heights in the same row and leaves the
   short ones trailing white space - a 163px panel beside a 711px one left a
   hole the height of a screen. Columns let each panel take the height it needs
   and pack the next one under it.

   Two, not three: three columns on a wide screen makes each panel narrow
   enough that the supplement facts table wraps, and a label that wraps is
   harder to read than one that is simply wider. */
.nn-pdp__panels {
  columns: 2;
  column-gap: clamp(1rem, 1.8vw, 1.75rem);
  width: min(100% - 2 * var(--nn-gutter), var(--nn-container));
  margin-inline: auto;
}

@media (max-width: 61.99em) {
  .nn-pdp__panels { columns: 1; }
}

.nn-pdp__panel {
  /* A panel is never split across a column break: half a supplement facts
     label at the bottom of one column and half at the top of the next is
     worse than an uneven column. */
  break-inside: avoid;
  margin-bottom: clamp(1rem, 1.8vw, 1.75rem);
  padding: clamp(1.5rem, 2.2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-pdp__panel h2 { margin: 0 0 1rem; font-size: 1.375rem; font-weight: 600; color: var(--nn-ink); }
.nn-pdp__prose { font-size: 1rem; line-height: 1.75; color: var(--nn-ink-soft); }
.nn-pdp__prose > * + * { margin-top: 1rem; }

.nn-facts li {
  display: flex;
  justify-content: space-between;
  gap: 1.125rem;
  padding: .75rem 0;
  border-top: 1px solid var(--line);
  font-size: .9375rem;
  color: var(--nn-ink-soft);
}

.nn-facts strong { font-weight: 700; color: var(--nn-ink); white-space: nowrap; }

/* --------------------------------------------------------------------------
   12.6 Reviews
   -------------------------------------------------------------------------- */
.nn-reviews { padding-block: clamp(2.5rem, 4.2vw, 5rem); background: var(--nn-cream); }

.nn-reviews__inner { width: min(100% - 2 * var(--nn-gutter), 52rem); margin-inline: auto; }
.nn-reviews__title { margin: 0; font-size: clamp(1.75rem, 2.6vw, 2.5rem); font-weight: 600; text-align: center; }
.nn-reviews__summary { margin-top: 1.5rem; text-align: center; }
.nn-reviews__score { font-size: clamp(2.25rem, 3.4vw, 2.75rem); font-weight: 700; line-height: 1; }
.nn-reviews__stars { margin-top: .375rem; color: var(--gold-dark); font-size: 1.25rem; letter-spacing: .2em; }
.nn-reviews__count { margin-top: .375rem; font-size: .875rem; color: var(--muted); }
.nn-reviews__empty { margin-top: 1.5rem; text-align: center; color: var(--muted); }
.nn-reviews__list { display: grid; gap: 1rem; margin-top: 2rem; }

.nn-review {
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-review__head { display: flex; align-items: center; gap: .75rem; }
.nn-review__stars { color: var(--gold-dark); letter-spacing: .15em; }

.nn-review__verified {
  padding: .1875rem .5rem;
  border: 1px solid #c2e4d0;
  border-radius: 999px;
  background: #e9f6ee;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1d6b3f;
}

.nn-review__title { margin-top: .625rem; font-size: 1rem; font-weight: 700; color: var(--nn-ink); }
.nn-review__body { margin-top: .5rem; line-height: 1.7; color: var(--nn-ink-soft); }
/* The reviewer's own pictures. A fixed-height strip rather than a grid, so a
   tall photo and a wide one do not shove the text around. */
.nn-review__photos {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .75rem;
  padding: 0;
  list-style: none;
}

.nn-review__photo { margin: 0; }

.nn-review__photo a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}

.nn-review__photo img {
  width: 5rem;
  height: 5rem;
  object-fit: cover;
  transition: transform var(--t-fast);
}

.nn-review__photo a:hover img,
.nn-review__photo a:focus-visible img { transform: scale(1.06); }

.nn-review__video { margin-top: .75rem; }

.nn-review__video video {
  width: 100%;
  max-width: 24rem;
  border-radius: var(--radius);
  background: var(--nn-black);
}

.nn-field__file {
  width: 100%;
  padding: .5rem 0;
  font-size: .875rem;
  color: var(--nn-ink-soft);
}

.nn-review__by { margin-top: .75rem; font-size: .8125rem; color: var(--muted); }

/* Indented and labelled, so a reply from the shop cannot be mistaken for
   another independent review. */
.nn-review__reply {
  margin-top: 1rem;
  padding: .875rem 1rem;
  border-left: 3px solid var(--nn-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--nn-cream);
}

.nn-review__reply-by { margin-bottom: .25rem; font-size: .75rem; font-weight: 700; color: var(--nn-ink); }

/* --------------------------------------------------------------------------
   12.7 Article
   -------------------------------------------------------------------------- */
.nn-article__head { padding-block: clamp(2.5rem, 4.2vw, 4rem) clamp(1.5rem, 2.6vw, 2.75rem); background: var(--nn-cream); }
.nn-article__head-inner { width: min(100% - 2 * var(--nn-gutter), 48rem); margin-inline: auto; text-align: center; }

.nn-article__kicker {
  display: inline-block;
  margin-bottom: .875rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.nn-article__title { margin: 0; font-size: clamp(1.875rem, 3.4vw, 3rem); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
.nn-article__meta { margin-top: .875rem; font-size: .875rem; color: var(--muted); }

/* Cropped to a banner. Left to its own proportions a near-square cover ran
   most of a screen tall before a reader reached the first sentence. */
.nn-article__cover {
  display: block;
  width: min(100% - 2 * var(--nn-gutter), 62.5rem);
  aspect-ratio: 16 / 7;
  margin: clamp(1.5rem, 2.6vw, 2.25rem) auto 0;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.nn-article__body { width: min(100% - 2 * var(--nn-gutter), 45rem); margin-inline: auto; padding-block: clamp(2rem, 3.4vw, 2.75rem) clamp(2.5rem, 4.2vw, 4rem); }
.nn-article__lede { font-size: 1.1875rem; font-weight: 500; line-height: 1.7; color: var(--nn-ink); }

/* Long-form copy. Generous measure and leading, because this is the one place
   on the site somebody reads more than a sentence. */
.nn-article__prose { margin-top: 1.625rem; font-size: 1.0625rem; line-height: 1.85; color: var(--nn-ink-soft); }
.nn-article__prose > * + * { margin-top: 1.25rem; }
.nn-article__prose h2 { margin-top: 2.25rem; font-size: 1.5rem; font-weight: 600; color: var(--nn-ink); }
.nn-article__prose h3 { margin-top: 1.75rem; font-size: 1.1875rem; font-weight: 600; color: var(--nn-ink); }
.nn-article__prose ul, .nn-article__prose ol { padding-left: 1.375rem; list-style: revert; }
.nn-article__prose li + li { margin-top: .5rem; }
.nn-article__prose a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: .2em; }
.nn-article__prose blockquote { padding-left: 1.125rem; border-left: 3px solid var(--nn-gold); color: var(--nn-ink); font-style: italic; }

/* Prose details the editor cannot set and the reader notices anyway. */

/* A table in an article is usually a comparison, and one that overflows the
   page silently is a comparison nobody can read. */
.nn-article__prose table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: .9375rem;
}

.nn-article__prose th,
.nn-article__prose td {
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  text-align: left;
}

.nn-article__prose th { background: var(--nn-cream); font-weight: 600; }

/* An image pasted at its natural size pushes the page sideways on a phone. */
.nn-article__prose img,
.nn-article__prose figure { max-width: 100%; height: auto; border-radius: var(--radius); }
.nn-article__prose figcaption { margin-top: .5rem; font-size: .8125rem; color: var(--muted); }

/* A heading linked to from a table of contents lands under the sticky header
   without this. */
.nn-article__prose h2,
.nn-article__prose h3 { scroll-margin-top: 6rem; }

/* Long words - an ingredient name, a URL an editor pasted - otherwise widen
   the column and take the whole page with it. */
.nn-article__prose { overflow-wrap: break-word; }

/* Breadcrumbs: shown as well as marked up, so a reader can climb back out. */
.nn-article__crumbs { margin: 0 0 1rem; font-size: .8125rem; color: var(--muted); }

.nn-article__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nn-article__crumbs li + li::before { content: "/"; margin-right: .375rem; opacity: .5; }
.nn-article__crumbs a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.nn-article__crumbs [aria-current="page"] { color: var(--nn-ink); }

/* The byline reads as one line of metadata rather than three stacked ones. */
.nn-article__meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.nn-article__meta > * + *::before { content: "·"; margin-right: .5rem; opacity: .6; }
.nn-article__byline { font-weight: 600; color: var(--nn-ink); }

.nn-article__note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   12.8 Basket
   -------------------------------------------------------------------------- */
.nn-cart { padding-block: clamp(2rem, 3.6vw, 3.5rem) clamp(3rem, 5.2vw, 6rem); background: var(--nn-cream); }
.nn-cart__inner { width: min(100% - 2 * var(--nn-gutter), var(--nn-container)); margin-inline: auto; }
.nn-cart__title { margin: 0 0 clamp(1.5rem, 2.6vw, 2.25rem); font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 600; text-align: center; letter-spacing: -.01em; }

.nn-cart__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.nn-cart__lines { display: grid; gap: .875rem; }

.nn-cart-line {
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr);
  grid-template-areas: "media body" "qty money";
  gap: 1rem 1.125rem;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

/* A line we can no longer sell is dimmed, not hidden: the shopper put it there
   and is owed an explanation and a way to remove it. */
.nn-cart-line--dim { background: #faf9f6; border-style: dashed; }
.nn-cart-line--dim .nn-cart-line__image { filter: grayscale(1); opacity: .6; }

.nn-cart-line__media { grid-area: media; }
.nn-cart-line__image { width: 5.75rem; height: 5.75rem; object-fit: cover; border-radius: var(--radius); }
.nn-cart-line__body { grid-area: body; min-width: 0; }
.nn-cart-line__name { font-size: 1rem; font-weight: 600; line-height: 1.35; }
.nn-cart-line__name a:hover { color: var(--gold-dark); }
.nn-cart-line__option { margin-top: .1875rem; font-size: .875rem; color: var(--nn-ink-soft); }
.nn-cart-line__sku { margin-top: .1875rem; font-size: .75rem; letter-spacing: .04em; color: var(--muted); }
.nn-cart-line__flag { margin-top: .4375rem; font-size: .8125rem; font-weight: 600; color: #9a5b12; }
.nn-cart-line--dim .nn-cart-line__flag { color: #7a2222; }

.nn-cart-line__qty { grid-area: qty; }
.nn-cart-line__qty-static { font-size: .9375rem; color: var(--muted); }
.nn-cart-line__money { grid-area: money; display: grid; gap: .25rem; justify-items: end; text-align: right; }
.nn-cart-line__total { font-size: 1rem; font-weight: 700; color: var(--nn-ink); }
.nn-cart-line__each { font-size: .78125rem; color: var(--muted); }

.nn-cart-line__remove button {
  padding: 0;
  font-size: .78125rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.nn-cart-line__remove button:hover { color: #7a2222; }

.nn-qty { display: flex; align-items: center; gap: .5rem; }

.nn-qty__input {
  width: 4.375rem;
  height: 2.5rem;
  padding: 0 .625rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nn-white);
  font-size: .9375rem;
  text-align: center;
  color: var(--nn-ink);
}

.nn-qty__input:focus-visible { outline: none; border-color: var(--nn-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, .25); }

.nn-qty__go {
  height: 2.5rem;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nn-cream);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--nn-ink);
}

.nn-cart__summary {
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-cart__summary-title { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--nn-ink); }
.nn-cart__rows { display: grid; gap: .625rem; margin: 1rem 0 0; }
.nn-cart__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.nn-cart__row dt { font-size: .875rem; color: var(--nn-ink-soft); }
.nn-cart__row dd { margin: 0; font-size: 1.0625rem; font-weight: 700; color: var(--nn-ink); }
.nn-cart__row--muted dd { font-size: .84375rem; font-weight: 500; color: var(--muted); }
.nn-cart__note { margin-top: .875rem; font-size: .78125rem; line-height: 1.6; color: var(--muted); }

.nn-cart__warning {
  margin-top: .875rem;
  padding: .625rem .75rem;
  border: 1px solid #edd6ad;
  border-radius: var(--radius);
  background: #fdf4e6;
  font-size: .8125rem;
  line-height: 1.5;
  color: #7a4a12;
}

.nn-cart__pending {
  margin-top: 1rem;
  padding: .75rem .875rem;
  border-radius: var(--radius);
  background: var(--nn-cream);
  font-size: .84375rem;
  line-height: 1.55;
  color: var(--nn-ink-soft);
  text-align: center;
}

.nn-cart__continue { display: block; margin-top: .875rem; font-size: .875rem; color: var(--muted); text-align: center; text-decoration: underline; text-underline-offset: .25em; }
.nn-cart__continue:hover { color: var(--gold-dark); }

.nn-cart__empty {
  padding: clamp(2.5rem, 5vw, 3.5rem) 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
  text-align: center;
}

.nn-cart__empty-line { margin-bottom: 1.25rem; font-size: 1.0625rem; color: var(--nn-ink-soft); }

/* --------------------------------------------------------------------------
   12.9 Wider screens
   -------------------------------------------------------------------------- */
@media (min-width: 48em) {
  .nn-cart-line {
    grid-template-columns: 5.75rem minmax(0, 1fr) 10.75rem 8.25rem;
    grid-template-areas: "media body qty money";
  }
}

@media (min-width: 62em) {
  .nn-pdp__grid { grid-template-columns: minmax(0, 1fr) minmax(20rem, 28.75rem); }
  .nn-cart__layout { grid-template-columns: minmax(0, 1fr) 21rem; gap: 1.75rem; }
  .nn-cart__summary { position: sticky; top: 5.25rem; }
}

/* --------------------------------------------------------------------------
   12.10 Buy panel — product page and listing card
   -------------------------------------------------------------------------- */
.nn-buy { display: grid; gap: .875rem; max-width: 26.25rem; margin-top: 1.625rem; }
.nn-buy__row { display: grid; gap: .375rem; }

.nn-buy__label {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-buy__select,
.nn-buy__qty {
  height: 2.875rem;
  padding: 0 .875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nn-white);
  font-size: .9375rem;
  color: var(--nn-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.nn-buy__select:focus-visible,
.nn-buy__qty:focus-visible {
  outline: none;
  border-color: var(--nn-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, .25);
}

.nn-buy__qty { width: 6rem; }
.nn-buy__submit { width: 100%; margin-top: .25rem; }

/* Hidden while it has nothing to say, so no gap opens under the button. */
.nn-buy__stock { margin: 0; font-size: .84375rem; font-weight: 600; color: #9a5b12; }
.nn-buy__stock:empty { display: none; }

/* --- Brand landing page --- */

.nn-brandhead { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2rem); background: var(--nn-cream); }

.nn-brandhead__inner {
  width: min(100% - 2 * var(--nn-gutter), 82rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

/* The mark beside the words from the width where there is room for both, and
   stacked below it, where a column of two would leave the name in a gutter. */
@media (min-width: 48em) {
  .nn-brandhead__inner { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
}

.nn-brandhead__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
  min-height: 7rem;
}

.nn-brandhead__mark img { max-width: 100%; height: auto; }

.nn-brandhead__initial {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--nn-gold);
}

.nn-brandhead__body { min-width: 0; }

.nn-brandhead__title { margin: 0 0 .75rem; font-size: clamp(1.75rem, 4vw, 2.75rem); }

.nn-brandhead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.nn-brandhead__fact {
  padding: .25rem .625rem;
  border: 1px solid var(--nn-line);
  border-radius: 999px;
  background: var(--nn-white);
  font-size: .75rem;
  letter-spacing: .02em;
  color: var(--nn-ink-soft);
}

.nn-brandhead__text { margin: 0 0 1rem; max-width: 60ch; line-height: 1.65; color: var(--nn-ink-soft); }

.nn-brandhead__site {
  display: inline-block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--gold-dark);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.nn-brandhead__more { margin: 1.5rem 0 0; }

/* The listing's own heading, on the pages that introduce their grid rather
   than being nothing but one. Constrained to match .nn-listing__products, so
   the heading lines up with the first card under it. */
.nn-listing__heading {
  width: min(100% - 2 * var(--nn-gutter), 82rem);
  margin: 0 auto 1.25rem;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* --- Goal landing page --- */

.nn-goalhead { padding-block: clamp(1.5rem, 3vw, 2.5rem); background: var(--nn-cream); }

.nn-goalhead__inner { width: min(100% - 2 * var(--nn-gutter), 60rem); margin-inline: auto; }
.nn-goalhead__title { margin: 0 0 .75rem; font-size: clamp(1.75rem, 4vw, 2.75rem); }
.nn-goalhead__text { margin: 0 0 .75rem; max-width: 60ch; line-height: 1.65; color: var(--nn-ink-soft); }

.nn-goalhead__count {
  margin: 0;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-goalhead__more { margin: 1.5rem 0 0; text-align: center; }

/* The aisles inside a department, on the category page. */
.nn-goalhead__children {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.nn-goalhead__child {
  display: inline-block;
  padding: .4375rem .875rem;
  border: 1px solid var(--nn-line);
  border-radius: 999px;
  background: var(--nn-white);
  font-size: .8125rem;
  text-decoration: none;
  color: var(--nn-ink);
}

.nn-goalhead__child:hover { border-color: var(--nn-gold); color: var(--gold-dark); }

/* The on/off state beside a notification switch. Words, not colour alone -
   §26 says information must not depend on colour. */
.nn-prefs__badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .125rem .5rem;
  border: 1px solid var(--nn-line);
  border-radius: 999px;
  background: var(--nn-white);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nn-ink-soft);
}

/* --- Saved lists --- */

.nn-lists__new { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }

.nn-lists__list {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--nn-line);
}

.nn-lists__list:last-child { border-bottom: 0; }

.nn-lists__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.nn-lists__name { margin: 0; font-size: 1.125rem; }

.nn-lists__controls { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .625rem 0 1rem; }

.nn-lists__link {
  flex-basis: 100%;
  margin: 0;
  font-size: .8125rem;
  color: var(--nn-ink-soft);
  overflow-wrap: anywhere;
}

.nn-lists__link code { font-size: .75rem; }

.nn-saved__move { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }

/* --- Points --- */

.nn-rewards__balance {
  margin: 1.25rem 0;
  padding: 1.25rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
}

.nn-rewards__points { margin: 0; font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700; }
.nn-rewards__worth { margin: .25rem 0 0; color: var(--nn-ink-soft); }

.nn-rewards__expiring {
  margin: .75rem 0 0;
  padding: .5rem .75rem;
  border-left: 3px solid var(--nn-gold);
  background: var(--nn-cream);
  font-size: .8125rem;
  color: var(--nn-ink-soft);
}

.nn-rewards__redeem { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }

.nn-rewards__codes, .nn-rewards__entries { display: grid; gap: .5rem; margin: .75rem 0 1.5rem; padding: 0; list-style: none; }

.nn-rewards__code {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: baseline;
  padding: .75rem 1rem;
  border: 1px dashed var(--nn-gold);
  border-radius: var(--radius);
  background: var(--nn-white);
}

.nn-rewards__code code { font-size: 1rem; font-weight: 700; letter-spacing: .06em; }

.nn-rewards__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .25rem .75rem;
  padding: .625rem .875rem;
  border-bottom: 1px solid var(--nn-line);
  font-size: .875rem;
}

.nn-rewards__reason { min-width: 0; }
.nn-rewards__amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.nn-rewards__date { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); }

/* --- Repeat orders --- */

.nn-subs { display: grid; gap: 1rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }

.nn-subs__item {
  padding: 1.25rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
}

.nn-subs__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.nn-subs__name { margin: 0; font-size: 1.0625rem; }
.nn-subs__when { margin: 0 0 1rem; font-size: .875rem; color: var(--nn-ink-soft); }

.nn-subs__form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; }

.nn-subs__field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }

.nn-subs__field > span {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-subs__input {
  padding: .5rem .625rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
  font-size: .9375rem;
  max-width: 100%;
}

.nn-subs__controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nn-line);
}

.nn-subs__control {
  padding: .4375rem .875rem;
  border: 1px solid var(--nn-line);
  border-radius: 999px;
  background: transparent;
  font-size: .8125rem;
  cursor: pointer;
  color: var(--nn-ink);
}

.nn-subs__control:hover { border-color: var(--nn-gold); }

/* Cancelling is worded and placed like the rest. Hiding it is the dark
   pattern §14 names outright; this only marks it as the destructive one. */
.nn-subs__control--cancel { color: var(--nn-ink-soft); }
.nn-subs__control--cancel:hover { border-color: var(--nn-ink-soft); }

/* The subscribe control on a product page. */
.nn-subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--nn-line);
}

.nn-subscribe__label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-subscribe__select {
  padding: .5rem .625rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
  font-size: .9375rem;
  color: var(--nn-ink);
}

/* --- Bundles --- */

.nn-bundles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2vw, 1.75rem);
  width: min(100% - 2 * var(--nn-gutter), 82rem);
  margin-inline: auto;
  padding: 0;
  list-style: none;
}

@media (min-width: 48em) { .nn-bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 75em) { .nn-bundles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.nn-bundles__card { display: flex; }

.nn-bundles__link {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
  padding: 1.25rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
  text-decoration: none;
  color: var(--nn-ink);
}

.nn-bundles__link:hover { border-color: var(--nn-gold); }
.nn-bundles__name { font-size: 1.125rem; font-weight: 700; }
.nn-bundles__text { color: var(--nn-ink-soft); font-size: .875rem; line-height: 1.55; }

.nn-bundles__count {
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-bundles__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: auto; }
.nn-bundles__total { font-size: 1.25rem; font-weight: 700; }
.nn-bundles__was { text-decoration: line-through; color: var(--muted); font-size: .875rem; }

.nn-bundles__saving {
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--nn-gold);
  color: var(--nn-black);
  font-size: .75rem;
  font-weight: 700;
}

/* The bundle's own buy panel, under the products it contains. */
.nn-bundlebuy {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 2 * var(--nn-gutter), 82rem);
  margin: 1.5rem auto 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
}

.nn-bundlebuy__sums { min-width: 0; }

.nn-bundlebuy__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .625rem;
  margin: 0 0 .25rem;
  color: var(--nn-ink-soft);
  font-size: .875rem;
}

.nn-bundlebuy__total { font-size: 1.5rem; color: var(--nn-ink); }
.nn-bundlebuy__line--saving { margin-bottom: .375rem; }
.nn-bundlebuy__was { text-decoration: line-through; color: var(--muted); }

.nn-bundlebuy__saving {
  margin: 0;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--gold-dark);
}

.nn-bundlebuy__add { flex: none; }

/* --- Shopping help launcher --- */

/* A link that floats over the page, so shopping help is one tap away from
   anywhere rather than something a shopper has to know the URL for. */
.nn-asklauncher {
  position: fixed;
  right: var(--nn-gutter);
  bottom: 1.25rem;
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .625rem 1rem;
  border-radius: 999px;
  background: var(--nn-black);
  color: var(--nn-white);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
}

.nn-asklauncher:hover { background: var(--nn-ink); color: var(--nn-gold-light); }
.nn-asklauncher:focus-visible { outline: 3px solid var(--nn-gold); outline-offset: 2px; }
.nn-asklauncher__icon { width: 1.125rem; height: 1.125rem; flex: none; }
.nn-asklauncher__label { white-space: nowrap; }

/* The compare bar and the sticky buy bar run the full width of the bottom of
   the screen. Rather than stack something on top of a control somebody is in
   the middle of using, this gets out of the way while either is up. */
body:has(.nn-compare-bar:not([hidden])) .nn-asklauncher,
body:has(.nn-stickybuy:not([hidden])) .nn-asklauncher { display: none; }

@media (max-width: 47.99em) {
  /* Above the bottom bar, never over it. */
  .nn-asklauncher { bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px)); }
}

/* --- Shopping help (§30) --- */
.nn-chat { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem); background: var(--nn-cream); }
.nn-chat__inner { width: min(100% - 2 * var(--nn-gutter), 46rem); margin-inline: auto; }
.nn-chat__title { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.nn-chat__lede { margin: 0 0 .75rem; color: var(--nn-ink-soft); }

/* Stated before anybody relies on an answer, and styled so it reads as a note
   rather than a warning banner people learn to skip. */
.nn-chat__disclaimer {
  margin: 0 0 1.5rem;
  padding: .75rem 1rem;
  border-left: 3px solid var(--nn-gold);
  background: var(--nn-white);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--nn-ink-soft);
}

.nn-chat__thread { display: grid; gap: 1rem; margin: 0 0 1rem; padding: 0; list-style: none; }

.nn-chat__turn {
  padding: .875rem 1.125rem;
  border-radius: var(--radius);
  background: var(--nn-white);
}

/* The shopper's own words sit apart from the answer, so a thread can be
   followed at a glance. Theirs is indented and narrower, the way every
   messaging app sets one side against the other; the reply stays full width
   because it is the side that carries product cards. */
.nn-chat__turn--you {
  background: transparent;
  border: 1px solid var(--nn-line);
  max-width: 85%;
  margin-inline-start: auto;
}

.nn-chat__turn--them { background: var(--nn-white); }

/* The newest turn is given focus after an answer so a screen reader is put
   down on it. That is not a keyboard user arriving, so no ring - but one who
   does reach it with the keyboard still gets one. */
.nn-chat__turn:focus { outline: none; }
.nn-chat__turn:focus-visible { outline: 2px solid var(--nn-gold); outline-offset: 2px; }

/* Where the page lands after a question. The margin is measured from the
   bottom of the sticky header, which runs to 136px once the announcement bar
   above it wraps onto two lines - without it the header covers the first line
   of the answer the shopper just asked for. */
#latest { scroll-margin-top: 9.5rem; }

.nn-chat__who {
  margin: 0 0 .25rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-chat__said { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }

/* The grid itself comes from .nn-listing__products, so the cards here and on
   the catalogue cannot drift apart - but the column count does not carry over.
   The catalogue's four columns inside a 46rem thread would be slivers, so
   results here sit two abreast at every width wide enough for two readable
   cards, and stack below that. */
.nn-chat__products {
  margin-top: 1rem;
  grid-template-columns: minmax(0, 1fr);
  /* The listing insets itself by a gutter because there it sits directly on
     the page. Here it is already inside a padded turn, and insetting again
     took 32px off cards that have little to spare. */
  width: 100%;
  margin-inline: 0;
}

/* The same cutoff the listing uses, and for the same reason it records: two
   columns below this leave a card too narrow for the buy button, which is an
   <input> and cannot wrap, so it pushes the page sideways. */
@media (min-width: 22.5em) {
  .nn-chat__products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.nn-chat__suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .875rem 0 0;
  padding: 0;
  list-style: none;
}

/* The same chips, offered when there is no conversation yet: an empty thread
   is a blank space that says nothing about what can be asked. */
.nn-chat__starters { margin: 0 0 1rem; }

.nn-chat__suggestion {
  padding: .5rem .875rem;
  border: 1px solid var(--nn-line);
  border-radius: 999px;
  background: var(--nn-white);
  font-size: .8125rem;
  cursor: pointer;
  /* A comfortable target on a phone, where these are tapped rather than
     clicked. */
  min-height: 2.25rem;
}

.nn-chat__suggestion:hover { border-color: var(--nn-gold); }

/* Stuck to the bottom of the viewport rather than sitting at the end of the
   page. A thread grows with every question, and a composer at the end of it is
   a scroll away from the shopper who wants to ask one more thing.
   Sticky rather than fixed, so at the foot of the page it settles into the
   flow instead of covering the last turn. */
.nn-chat__composer {
  position: sticky;
  bottom: 1rem;
  z-index: 5;
  padding-block: .75rem;
  background: var(--nn-cream);
  /* Spread in the section's own colour, so turns passing underneath are hidden
     cleanly instead of showing through at the edges. */
  box-shadow: 0 0 0 .75rem var(--nn-cream);
}

/* The compare bar is fixed across the bottom of the window. Lifted, so the two
   cannot sit on top of one another. */
body:has(.nn-compare-bar:not([hidden])) .nn-chat__composer { bottom: 4.5rem; }

.nn-chat__form { display: flex; gap: .5rem; align-items: center; }

.nn-chat__input {
  flex: 1;
  min-width: 0;
  padding: .75rem .875rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-white);
  /* 1rem exactly: iOS Safari zooms the page on focus for anything smaller. */
  font-size: 1rem;
}

.nn-chat__input:focus-visible { outline: 2px solid var(--nn-gold); outline-offset: 1px; }
.nn-chat__send { flex: none; }

.nn-chat__clear {
  margin-top: 1rem;
  border: 0;
  background: transparent;
  font-size: .8125rem;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 47.99em) {
  /* Clear of the bottom navigation, which is fixed over the foot of every page
     on a phone. */
  .nn-chat__composer { bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }

  body:has(.nn-compare-bar:not([hidden])) .nn-chat__composer {
    bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px));
  }

  /* A phone has no room for the long note above the thread and the thread
     itself, so the note is tightened rather than dropped: it still has to be
     read before anybody relies on an answer. */
  .nn-chat__disclaimer { margin-bottom: 1rem; padding: .625rem .75rem; }
  .nn-chat__turn { padding: .75rem .875rem; }
  .nn-chat__turn--you { max-width: 92%; }
}

/* --- Recommendations that say why (§13) --- */
.nn-recs { padding-block: clamp(2rem, 5vw, 3.5rem); }
.nn-recs__inner { width: min(100% - 2 * var(--nn-gutter), var(--nn-max)); margin-inline: auto; }
.nn-recs__title { margin: 0 0 1.25rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
.nn-recs__pick { display: flex; flex-direction: column; }

/* The reason, not an afterthought: it is what separates this from
   "recommended for you", which a customer can neither check nor disagree
   with. */
.nn-recs__reason {
  margin: .5rem 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.nn-recs__why { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--muted); }
.nn-recs__why a { text-decoration: underline; }

/* --- Personalisation controls (§14) --- */
.nn-prefs__switch {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  margin: 1.25rem 0;
  padding: 1rem 1.125rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-cream);
}

.nn-prefs__state { margin: 0; font-weight: 600; }
.nn-prefs__held, .nn-prefs__stated { margin-top: 1.75rem; }
.nn-prefs__title { margin: 0 0 .5rem; font-size: 1rem; font-weight: 700; }
.nn-prefs__note { margin: 0 0 .75rem; font-size: .8125rem; color: var(--muted); }
.nn-prefs__list { margin: 0 0 1rem; padding-left: 1.125rem; font-size: .875rem; }

.nn-prefs__erase {
  border: 0;
  background: transparent;
  font-size: .875rem;
  color: var(--nn-danger, #9B1C1C);
  text-decoration: underline;
  cursor: pointer;
}

.nn-prefs__form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.nn-prefs__option { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; }

/* --- Rescuing a search that found nothing (§9) --- */
.nn-rescue { margin-top: 2rem; }

.nn-rescue__correction {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  text-align: center;
}

.nn-rescue__correction a { font-weight: 700; text-decoration: underline; }

.nn-rescue__block { margin-top: 2rem; }

.nn-rescue__title {
  margin: 0 0 .75rem;
  font-size: 1rem;
  font-weight: 700;
}

.nn-rescue__note {
  margin: 0 0 1rem;
  font-size: .875rem;
  color: var(--muted);
}

.nn-rescue__categories {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nn-rescue__categories a {
  display: inline-block;
  padding: .375rem .75rem;
  border: 1px solid var(--nn-line);
  border-radius: 999px;
  font-size: .875rem;
}

.nn-rescue__categories a:hover { border-color: var(--nn-gold); }

/* --- Saved searches --- */
.nn-save-search { margin: .5rem 0 0; }

.nn-save-search__submit {
  padding: .375rem .75rem;
  border: 1px solid var(--nn-line);
  border-radius: 999px;
  background: transparent;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--nn-ink-soft);
  cursor: pointer;
}

.nn-save-search__submit:hover { border-color: var(--nn-gold); color: var(--nn-ink); }

.nn-saved-searches { margin: 1rem 0 0; padding: 0; list-style: none; }

.nn-saved-search {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 0;
  border-bottom: 1px solid var(--nn-line);
}

.nn-saved-search__main { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.nn-saved-search__name { font-weight: 600; overflow-wrap: anywhere; }

/* Drawn only when there is something new, so it keeps meaning something. */
.nn-saved-search__badge {
  flex: none;
  padding: .125rem .5rem;
  border-radius: 999px;
  background: var(--nn-gold);
  color: #16130C;
  font-size: .75rem;
  font-weight: 700;
}

.nn-saved-search__actions { display: flex; align-items: center; gap: .5rem; }

.nn-saved-search__remove {
  border: 0;
  background: transparent;
  font-size: .8125rem;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
}

/* --- "Tell me when it is back" ---
   Shown only where the buy button cannot be, so it reads as the thing to do
   next rather than a second call to action competing with the first. */
.nn-notify {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--nn-line);
  border-radius: var(--radius);
  background: var(--nn-cream);
}

.nn-notify__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.nn-notify__lede,
.nn-notify__as {
  margin: .375rem 0 .75rem;
  font-size: .84375rem;
  line-height: 1.5;
  color: var(--nn-ink-soft);
}

.nn-notify__form .nn-field { margin-bottom: .75rem; }

.nn-notify__submit { width: 100%; }

.nn-buy__unavailable {
  margin-top: 1.625rem;
  padding: .875rem 1rem;
  border-radius: var(--radius);
  background: var(--nn-cream);
  font-size: .90625rem;
  color: var(--muted);
}

/* The listing card's call to action: quick add, with the full page one tap
   away for anything that needs a choice made first. */
.nn-card-buy { display: grid; gap: .5rem; margin-top: auto; }
.nn-card-buy__link { font-size: .8125rem; color: var(--muted); text-align: center; text-decoration: underline; text-underline-offset: .25em; }
.nn-card-buy__link:hover { color: var(--gold-dark); }
.nn-card-buy__soldout { font-size: .8125rem; font-weight: 600; color: #9a5b12; text-align: center; }

/* --------------------------------------------------------------------------
   12.11 Basket count on the header icon, and the basket's own message strip
   -------------------------------------------------------------------------- */
.nn-header__count { position: absolute; inset: 0; pointer-events: none; }

/* Sat over the middle of the glyph at its first size, which left the basket
   unrecognisable. Pushed clear of it instead. */
.nn-header__count-bubble {
  position: absolute;
  right: -.4375rem;
  top: -.375rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--nn-gold);
  color: var(--nn-ink);
  font-size: .625rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--nn-black);
}

/* Where a basket change speaks. Empty on most page loads; the container stays
   so a Turbo Stream always has something to replace. */
.cart-flash:empty { display: none; }
.cart-flash .container { width: min(100% - 2 * var(--nn-gutter), var(--nn-container)); margin-inline: auto; }

/* --------------------------------------------------------------------------
   12.12 Buttons
   The nn- sections each style their own button, which is right for a design
   with eight of them. The pages below need one that is not tied to a section.
   -------------------------------------------------------------------------- */
.nn-btn {
  --nn-btn-bg: var(--nn-gold);
  --nn-btn-fg: #000;
  --nn-btn-bd: var(--nn-gold);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(3rem, 3.2vw, 3.75rem);
  padding: .75rem clamp(1.5rem, 1.9vw, 2.25rem);
  border: 1px solid var(--nn-btn-bd);
  background: var(--nn-btn-bg);
  color: var(--nn-btn-fg);
  font: inherit;
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.nn-btn:hover { --nn-btn-bg: var(--nn-gold-light); --nn-btn-bd: var(--nn-gold-light); }
.nn-btn--sm { min-height: 2.75rem; padding: .5rem 1.125rem; font-size: .875rem; }
.nn-btn--dark { --nn-btn-bg: var(--nn-black); --nn-btn-fg: var(--nn-white); --nn-btn-bd: var(--nn-black); }
.nn-btn--dark:hover { --nn-btn-bg: var(--nn-ink); --nn-btn-bd: var(--nn-ink); }
.nn-btn--block { width: 100%; }

/* The quieter of two buttons side by side, so the primary one still reads as
   the primary one. */
.nn-btn--ghost {
  --nn-btn-bg: transparent;
  --nn-btn-fg: var(--nn-ink);
  --nn-btn-bd: var(--line);
}

.nn-btn--ghost:hover { --nn-btn-bg: var(--nn-cream); --nn-btn-bd: var(--gold-dark); }

/* A disabled buy button must not look pressable. */
.nn-btn:disabled { opacity: .55; cursor: not-allowed; }
.nn-btn:disabled:hover { --nn-btn-bg: var(--nn-gold); --nn-btn-bd: var(--nn-gold); }

/* ==========================================================================
   12b. DOCUMENT PAGES  (.nn-doc, .nn-faq)
   The CMS pages the footer links to, and the FAQ list.
   ========================================================================== */
.nn-doc {
  padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(3rem, 6vw, 6rem);
  background: var(--nn-white);
}

.nn-doc__inner {
  width: min(100% - 2 * var(--nn-gutter), 48rem);
  margin-inline: auto;
}

.nn-doc__title {
  margin: 0 0 1rem;
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.nn-doc__summary {
  margin: 0 0 1.5rem;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--nn-ink-soft);
}

.nn-doc__body { font-size: 1.0625rem; line-height: 1.8; color: var(--nn-ink-soft); }
.nn-doc__body > * + * { margin-top: 1.25rem; }
.nn-doc__body h2 { margin-top: 2.25rem; font-size: 1.5rem; font-weight: 600; color: var(--nn-ink); }
.nn-doc__body h3 { margin-top: 1.75rem; font-size: 1.1875rem; font-weight: 600; color: var(--nn-ink); }
.nn-doc__body ul, .nn-doc__body ol { padding-left: 1.4rem; list-style: revert; }
.nn-doc__body li + li { margin-top: .5rem; }
.nn-doc__body a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: .2em; }

.nn-doc__updated {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--muted);
}

.nn-doc__updated a { text-decoration: underline; text-underline-offset: .2em; }

.nn-faq__group + .nn-faq__group { margin-top: 2.5rem; }

.nn-faq__group-title {
  margin: 0 0 .75rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--nn-ink);
}

/* <details> rather than a scripted accordion: it opens with no JavaScript,
   the browser's own find-in-page can reach inside it, and it is keyboard
   operable without anybody writing key handlers. */
.nn-faq__item {
  border-bottom: 1px solid var(--line);
}

.nn-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--nn-ink);
  cursor: pointer;
  list-style: none;
}

.nn-faq__q::-webkit-details-marker { display: none; }

.nn-faq__q::after {
  content: "+";
  flex: none;
  font-size: 1.375rem;
  font-weight: 400;
  color: var(--gold-dark);
  line-height: 1;
}

.nn-faq__item[open] .nn-faq__q::after { content: "\2212"; }

.nn-faq__a {
  padding: 0 0 1.125rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nn-ink-soft);
}

.nn-faq__a > * + * { margin-top: .75rem; }

/* =========================================================
   Additions for the Rails storefront
   ========================================================= */

/* base.css is an admin stylesheet and is not loaded here, so the two utilities
   the layout relies on are defined alongside the design they belong to. */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:var(--white);padding:10px 16px;border-radius:0 0 var(--radius) 0
}
.skip-link:focus{left:0}

/* Market switcher in the header. */
.market{display:inline-flex;align-items:center}
.market__select{
  background:transparent;color:inherit;border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-sm);padding:4px 8px;font:inherit;font-size:12px;cursor:pointer
}
.market__select option{color:var(--ink)}

/* Flash messages. */
.flash{margin:16px 0;padding:12px 16px;border-radius:var(--radius);font-size:14px}
.flash--ok{background:#eef7ee;border:1px solid #bfe0c2;color:#20492a}
.flash--error{background:#fdeeee;border:1px solid #f0c2c2;color:#7a2222}

/* The video card links out to the provider, so it is an anchor where the
   prototype had a button. Same box. */
/* The prototype's media slot was a <button>; linking out to the provider
   makes it an <a>. Same box, and it keeps its own height so a thumbnail that
   fails to load leaves a placeholder rather than a collapsed card. */
a.vcard__media{display:block;position:relative;overflow:hidden}
.vcard__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Stops the page scrolling behind the open mobile drawer. */
body.is-locked{overflow:hidden}

/* Listing pager. Previous / next / position - a shopper does not need a page
   size selector, and the ends stay present but inert so the control does not
   move as you page. */
.pager{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:48px;padding-top:28px;border-top:1px solid var(--line)
}
.pager__link{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border:1px solid var(--line);border-radius:999px;
  color:var(--ink);text-decoration:none;font-size:14px;font-weight:600;
  transition:border-color var(--t-fast),transform var(--t-fast)
}
.pager__link:hover{border-color:var(--gold-dark);transform:translateY(-1px)}
.pager__link.is-disabled{opacity:.35;pointer-events:none}
.pager__status{font-size:14px;color:var(--muted)}

/* =========================================================

/* =========================================================
   Scroll reveal
   ========================================================= */
/* Hidden only when a script is actually running to reveal it again.
   The prototype hid .reveal unconditionally, which means a blocked, failed or
   still-loading script leaves the entire shop blank - the worst possible
   failure for the page that sells things. The layout sets data-reveal="on"
   from an inline script, so no script means no hiding. */
[data-reveal="on"] .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal="on"] .reveal.is-visible{opacity:1;transform:none}

/* Someone who has asked for less motion gets the content, not the animation. */
@media (prefers-reduced-motion: reduce){
  [data-reveal="on"] .reveal{opacity:1;transform:none;transition:none}
}
[data-reveal="on"] .reveal:nth-child(2){transition-delay:.06s}
[data-reveal="on"] .reveal:nth-child(3){transition-delay:.12s}
/* Cards in a row come in one after another rather than all at once. Named for
   the grids that exist: these selectors still pointed at the classes the old
   markup used, so the stagger had quietly stopped happening. */
[data-reveal="on"] .nn-products__grid .reveal:nth-child(2),
[data-reveal="on"] .nn-blog__grid .reveal:nth-child(2),
[data-reveal="on"] .nn-listing__products .reveal:nth-child(2),
[data-reveal="on"] .nn-listing__articles .reveal:nth-child(2) { transition-delay: .1s; }

[data-reveal="on"] .nn-products__grid .reveal:nth-child(3),
[data-reveal="on"] .nn-blog__grid .reveal:nth-child(3),
[data-reveal="on"] .nn-listing__products .reveal:nth-child(3),
[data-reveal="on"] .nn-listing__articles .reveal:nth-child(3) { transition-delay: .2s; }

/* =========================================================

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   Desktop defaults are defined first; smaller screens progressively override
   them with max-width queries.
   ========================================================================== */

/* Desktop defaults */
.nn-header__inner { gap: 2rem; }
.nn-header__logo {
  position: static;
  flex: none;
  order: 1;
  align-items: flex-start;
  transform: none;
}
.nn-header__nav {
  order: 2;
  /* flex: 1 1 auto; */
  position: static;
  padding: 0 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}
.nn-header__ctas { display: flex; order: 3; margin-left: 0; }
.nn-header__actions { order: 4; margin-left: 0; }
.nn-header__toggle { display: none; }
.nn-header__list { flex-direction: row; gap: clamp(2rem, 4vw, 4.75rem); }
.nn-header__link {
  position: relative;
  padding: .5rem 0;
  border: 0;
  font-size: 1rem;
}
.nn-header__menu-button {
  display: flex;
  align-items: center;
  width: auto;
  text-align: center;
}
.nn-header__submenu {
  position: absolute;
  top: calc(100% + .75rem);
  left: 50%;
  min-width: 13rem;
  padding: .625rem 0;
  border: 1px solid rgba(255, 255, 255, .18);
  background: var(--nn-black);
  box-shadow: 0 18px 24px rgba(0, 0, 0, .4);
  transform: translate(-50%, -.5rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.nn-header__item--has-menu { position: relative; }
.nn-header__item--has-menu.is-open .nn-header__submenu,
.nn-header__item--has-menu:focus-within .nn-header__submenu {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.nn-header__submenu a { padding: .625rem 1rem; white-space: nowrap; }
.nn-header__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: .125rem;
  width: 100%;
  height: 2px;
  background: var(--nn-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.nn-header__link:hover::after,
.nn-header__link:focus-visible::after { transform: scaleX(1); }
/* .nn-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  column-gap: clamp(2rem, 4vw, 4rem);
  min-height: min(78vh, 46rem);
  padding-top: 0;
} */
.nn-hero__content { align-self: center; max-width: 41.5625rem;  }
.nn-hero__media { max-width: none; }
.nn-categories { --nn-cat-spv: 4; --nn-cat-gap: 1.1875rem; }
.nn-howto__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 36rem); column-gap: 2rem; }
.nn-howto__content { padding-left: clamp(0rem, 3.3vw, 4rem); }
.nn-products__item { flex-basis: calc((100% - 2 * var(--nn-products-gap)) / 3); max-width: none; }
.nn-featured__slide { display: block; position: relative; aspect-ratio: 1920 / 917; min-height: 26rem; }
.nn-featured__photo {
  position: absolute;
  inset: 0 auto 0 0;
  width: 46.5%;
  aspect-ratio: auto;
  clip-path: polygon(0 0, 100% 0, 73.1% 100%, 0 100%);
}
.nn-featured__bottle { position: absolute; top: 50%; left: 41.4%; width: 32%; margin: 0; translate: -50% -50%; }
.nn-featured__content { position: absolute; top: 50%; left: 57.5%; width: 36%; margin: 0; padding: 0; translate: 0 -50%; text-align: left; }
.nn-featured__text { margin-inline: 0; }
.nn-reels { --nn-reels-spv: 5; --nn-reels-gap: 1.625rem; }
.nn-reels__swiper { overflow: hidden; margin: -4px; padding: 4px; }
.nn-reels__arrow--prev { left: 0; transform: translate(-50%, -50%); }
.nn-reels__arrow--next { right: 0; transform: translate(50%, -50%); }
.nn-footer__logo { order: 0; min-width: var(--nn-footer-logo-w); }
.nn-footer__fda { justify-self: start; }
.nn-footer__legal { justify-content: flex-start; padding: 0 0 1.25rem 2.7rem; }
.nn-blog { --nn-blog-cols: 3; }
.nn-blog--cols-4 { --nn-blog-cols: 4; }
.nn-blog__item:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
.pt-0{
  padding-top: 0;
}


@media (max-width: 1600px) {
  .nn-reels { --nn-reels-gap: 1.25rem; }
  .nn-hero__title{
    font-size: 3.75rem;
  }
  .nn-hero__content{padding-block: 0;}
  .nn-hero__inner{padding: 0 5.125rem;}
  .nn-footer__newsletter{
    max-width: 33.8rem;
  }
}

@media (max-width: 1600px) and (min-width: 1280px) {
  .nn-hero__text{    font-size: 24px;}
  .nn-hero__btn{font-size: 16px;}
  .nn-header__inner {
    gap: 1rem;
    padding-inline: 1.5rem;
  }

  .nn-header__logo img {
    width: 7.5rem;
    height: auto;
  }

  .nn-header__nav {
    padding-left: 1rem;
  }

  /* .nn-header__list {
    gap: clamp(1rem, 1.7vw, 1.75rem);
  } */

  .nn-header__link {
    font-size: .8125rem;
  }

  .nn-header__ctas {
    gap: .75rem;
  }

  .nn-header__cta {
    min-height: 3rem;
    padding: .625rem 1rem;
    font-size: .875rem;
  }

  .nn-header__cta--primary {
    min-width: 6.5rem;
  }

  .nn-header__cta--outline {
    min-width: 9.5rem;
  }

  .nn-header__actions {
    gap: 0.9375rem;
  }

  .nn-header__action {
    width: 2rem;
    height: 2.25rem;
  }

  /* .nn-header__action img {
    max-width: 1.5rem;
  } */


  .nn-categories__arrow--prev { left: .5rem; }
.nn-categories__arrow--next { right: .5rem; }
}

@media (max-width: 1279px) {
      .nn-hero__title {
        font-size: 54px;
    }
    .nn-hero__content{max-width: 33.5625rem;}
  .nn-header__inner { gap: 1rem; }
  .nn-header__banner-text { font-size: .75rem; }
  .nn-header__action { width: 2.75rem; height: 2.75rem; }
  .nn-header__logo { position: absolute; left: 50%; order: initial; align-items: center; transform: translateX(-50%); }
  .nn-header__nav { order: initial; flex: initial; position: absolute; padding: .25rem var(--nn-gutter) 1.5rem; background: var(--nn-black); border-top: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 18px 24px rgba(0, 0, 0, .4); visibility: hidden; opacity: 0; transform: translateY(-.5rem); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
  .nn-header__nav.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
  .nn-header__ctas { display: none; }
  .nn-header__actions { order: initial; margin-left: auto; }
  .nn-header__toggle { display: inline-flex; }
  .nn-header__list { flex-direction: column; gap: 0; }
  .nn-header__link { position: static; padding: 1rem 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 1rem; }
  .nn-header__menu-button { display: flex; width: 100%; text-align: left; }
  .nn-header__submenu { position: static; min-width: 0; padding: .25rem 0 .5rem 1rem; border: 0; background: transparent; box-shadow: none; transform: none; opacity: 1; pointer-events: auto; }
  .nn-header__item--has-menu .nn-header__submenu { display: none; }
  .nn-header__item--has-menu.is-open .nn-header__submenu { display: block;transform: initial;}
  .nn-header__submenu a { padding: .625rem 0; white-space: normal; }
  .nn-header__link::after { display: none; }
  .nn-categories { --nn-cat-spv: 3; --nn-cat-gap: 1.125rem; }
  .nn-categories__arrow--prev { left: 0; transform: translate(-50%, -50%); }
  .nn-categories__arrow--next { right: 0; transform: translate(50%, -50%); }
  .nn-reels { --nn-reels-spv: 4; --nn-reels-gap: 1.125rem; }
  .nn-footer__logo { order: -1; min-width: 0; }
  .nn-footer__fda { justify-self: auto; }
  .nn-footer__legal { justify-content: center; padding: 0; }
}

@media (max-width: 1023px) {
  .hero-banner img{object-position: left;}

  .nn-hero__inner { min-height: 0; padding-top: clamp(2.5rem, 8vw, 4rem); padding-bottom: clamp(2.5rem, 8vw, 4rem); }
  .nn-hero__content { align-self: auto; }
  .nn-hero__media { max-width: 40rem; }
  .nn-categories { --nn-cat-spv: 3.2; --nn-cat-gap: 1rem; }
  .nn-howto__inner { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .nn-howto__content { padding-left: 0; }
  .nn-products__item { flex-basis: calc((100% - var(--nn-products-gap)) / 2); }
  .nn-featured__slide { display: flex; position: static; aspect-ratio: auto; min-height: 0; }
  /* Hidden by default on a phone: the desktop photograph is a wide landscape
     and cover-cropping it to this shape leaves an unreadable sliver, so the
     design shows the bottle alone. A banner that has had a portrait crop
     uploaded gets its photograph back. */
  .nn-featured__photo { position: relative; inset: auto; width: 100%; aspect-ratio: 4 / 3; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); display: none; }
  .nn-featured__photo--mobile { display: block; }
  .nn-featured__bottle { position: relative; top: auto; left: auto; width: clamp(9rem, 42vw, 16rem); margin: 0 auto; translate: none; }
  .nn-featured__content { position: static; width: min(100% - 2 * var(--nn-gutter), 40rem); margin: 0 auto; padding: 1.5rem 0 6rem; translate: none; text-align: center; }
  .nn-featured__text { margin-inline: auto; }
  .nn-reels { --nn-reels-spv: 3.3; --nn-reels-gap: 1rem; }
  .nn-reels__swiper { overflow: visible; margin: 0; padding: 0; }
  .nn-reels__arrow--prev { left: .5rem; transform: translateY(-50%); }
  .nn-reels__arrow--next { right: .5rem; transform: translateY(-50%); }
  .nn-blog { --nn-blog-cols: 2; }
  .nn-blog--cols-4 { --nn-blog-cols: 2; }
  .nn-blog__item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--nn-blog-gap)) / 2); }
}

@media (max-width: 767.84px) {
  .nn-header__banner-text { font-size: .6875rem; }
  .nn-categories { --nn-cat-spv: 2.2; --nn-cat-gap: .875rem; }
  .nn-reels { --nn-reels-spv: 2.3; --nn-reels-gap: .875rem; }
  .nn-products__item { flex-basis: 100%; max-width: 30rem; }
  .nn-blog { --nn-blog-cols: 1; }
  .nn-blog--cols-4 { --nn-blog-cols: 1; }
  .nn-blog__item:last-child:nth-child(odd) { grid-column: auto; justify-self: stretch; width: auto; }
}

@media (max-width: 639.84px) {
  .nn-header__icon{width:1.1875rem;height:1.1875rem}
  .nn-header__logo{width: 32%;}
  .nn-blog__grid { max-width: 34rem; }
  .nn-hero{min-height: auto;}
  .nn-hero__inner{padding: 70px 16px;}
  .nn-hero__title {
        font-size: 34px;
    }
    .nn-hero__text{font-size: 14px;}
    .nn-hero__btn{font-size: 14px;}
    .nn-categories__arrow--prev{left: 12px;}
    .nn-categories__arrow--next{right: 12px;}
}


/* ==========================================================================
   HERO ON A PHONE
   The product photograph carries the section on its own: the headline, the
   standfirst and the quiz button come off, leaving the picture and one
   button. Everything from 768px upwards is untouched, which is why this is
   its own query rather than folded into the 1023px one - that one covers
   tablets, and a tablet has room for the words.
   ========================================================================== */
@media (max-width: 47.99em) {
  /* The headline used to give the hero its height. With only a button left it
     collapses to 188px and cover-crops a portrait bottle shot to a slice of
     its middle, which is a photograph of nothing. */
  /* Stacked, not overlaid: the photograph is a strip across the top and the
     button sits under it. Laid over the image the button covered the lower
     third of both bottles, which is the part of a banner a shop least wants
     covered. The hero stops being a positioning context on a phone and
     becomes two blocks. */
  .nn-hero { display: block; }

  .hero-banner {
    position: relative;
    z-index: 0;
    aspect-ratio: 16 / 10;
    height: auto;
  }

  .nn-hero__inner {
    min-height: 0;
    padding-top: clamp(1rem, 4vw, 1.5rem);
    padding-bottom: clamp(1rem, 4vw, 1.5rem);
  }

  /* The desktop photograph is 1920x800 with the bottles on its right-hand
     third. object-position: left - the rule this replaces - framed the empty
     wall beside them, so the phone got a banner with no product in it. This
     crops to the product instead. */
  .hero-banner img { object-position: 72% center; }

  /* Hidden, not deleted: the page still needs its one h1, and this section is
     named by it. */
  .nn-hero__title,
  .nn-hero__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nn-hero__btn--outline { display: none; }
  .nn-hero__content { width: 100%; }
  .nn-hero__actions { justify-content: center; }
}

@media (max-width: 479.84px) {
  .nn-hero__btn { flex: 1 1 100%; }
}


/* ==========================================================================
   14. HEADER AT SMALL WIDTHS — market switcher and logo
   The design had no market switcher, so nothing reserved room for it. Below
   1280px the logo is centred absolutely, which means the actions row will
   happily draw straight over the wordmark, and did.
   ========================================================================== */
@media (max-width: 1279px) {
  .nn-header__market-select { font-size: .6875rem; padding: .2rem .3rem; }
  .nn-header__actions { gap: .625rem; }
}

/* The whole range where the logo is centred absolutely - which is every width
   below the desktop nav, not just phones. Scoping this to phones left 768px
   overlapping the moment a fourth icon joined the actions row. */
@media (max-width: 1279px) {
  /* Out of the absolute centring and into the layout.
     Shrinking the pieces was the first attempt and it could not work: a box
     that is centred absolutely has no room reserved for it, so the row beside
     it draws straight over the wordmark as soon as that row grows - which is
     what the market switcher did. Three columns give the logo one of its own,
     so it is centred in the space that is actually left and the switcher has
     nowhere to overlap from. */
  .nn-header__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    justify-content: initial;
  }

  /* A definite width, not a percentage. A percentage inside a column that is
     itself sized to its contents has nothing stable to resolve against, and
     the wordmark collapsed to a few pixels wide. */
  .nn-header__logo {
    position: static;
    justify-self: center;
    width: min(8.5rem, 100%);
    transform: none;
  }

  .nn-header__logo img { width: 100%; height: auto; }

}

@media (max-width: 767.84px) {
  .nn-header__market-select { font-size: .625rem; padding: .15rem .25rem; }
  .nn-header__actions { gap: .5rem; }
}

@media (max-width: 639.84px) {
  /* Extra room on the right: the basket's count bubble overhangs its icon by
     design, and the icon is the last thing in the row. */
  .nn-header__inner { gap: .5rem; padding-inline: .75rem 1.125rem; }
  /* Definite, for the same reason as above: a percentage here is measured
     against a column the logo itself is sizing, so it shrank to a quarter of
     a quarter and the wordmark became unreadable. */
  .nn-header__logo { width: min(6.5rem, 100%); }
  .nn-header__toggle { width: 2.75rem; min-height: 2.75rem; margin-left: -.5rem; }

  /* The market switcher stays ahead of the icons, as it is at every other
     width. Moved to the end it sat under the basket's count bubble, which
     overhangs the icon by design. */
  .nn-header__market-select { font-size: .625rem; }
}

/* ==========================================================================
   15. SLIDERS BEFORE JAVASCRIPT
   The design assumed the slider was always running. It is not: scripting can
   be off, blocked, or still downloading, and until the controller connects
   the arrows are buttons that do nothing and every tile past the fourth is
   simply cut off by the section's overflow - unreachable, with no way to know
   it is there.

   So the plain state is the useful one - a scroll-snapped row that shows
   everything and can be swiped or scrolled - and the slider takes over only
   once it has actually started, which is what .is-live means.
   ========================================================================== */
.nn-categories__swiper,
.nn-reels__swiper {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.nn-categories__swiper::-webkit-scrollbar,
.nn-reels__swiper::-webkit-scrollbar { display: none; }

.nn-categories__slide,
.nn-reels__slide {
  flex-shrink: 0;
  scroll-snap-align: start;
}

.nn-categories__arrow,
.nn-reels__arrow,
.nn-featured__nav { display: none; }

/* A carousel with one slide has nothing to carry anybody to. */
.nn-featured__slide:not(:first-child) { display: none; }

.nn-categories__slider.is-live .nn-categories__swiper,
.nn-reels__slider.is-live .nn-reels__swiper {
  overflow-x: visible;
  scroll-snap-type: none;
}

.nn-categories__slider.is-live .nn-categories__arrow { display: inline-flex; }
.nn-reels__slider.is-live .nn-reels__arrow { display: inline-flex; }
.nn-featured.is-live .nn-featured__nav { display: flex; }
.nn-featured.is-live .nn-featured__slide { display: block; }

/* The reels row clips at desktop once the slider owns it; the categories row
   keeps its deliberate bleed past the container edge. */
@media (min-width: 1280px) {
  .nn-reels__slider.is-live .nn-reels__swiper { overflow: hidden; margin: -4px; padding: 4px; }
}

/* Nothing to scroll: the controller says so, and the arrows go again. */
.nn-categories__slider.is-locked .nn-categories__arrow,
.nn-reels__slider.is-locked .nn-reels__arrow { display: none; }

/* The Learn listing adds two lines the home page's blog card does not carry:
   which subject a piece is filed under, and when it was published. */
.nn-blog__kicker {
  margin-bottom: .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.nn-blog__meta { margin-top: .5rem; font-size: .75rem; color: var(--muted); }

/* A video with no product attached still needs its title row, and it must not
   look like the link the row beside it is. */
.nn-reels__product--plain {
  display: block;
  padding: clamp(.75rem, 1vw, 1.15rem) clamp(1rem, 1.46vw, 1.75rem);
  font-size: clamp(.875rem, .75vw, .9375rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--nn-ink);
}

/* ==========================================================================
   16. CHECKOUT AND CONFIRMATION
   ========================================================================== */
.nn-checkout { padding-block: clamp(2rem, 3.6vw, 3.5rem) clamp(3rem, 5.2vw, 6rem); background: var(--nn-cream); }
.nn-checkout__inner { width: min(100% - 2 * var(--nn-gutter), var(--nn-container)); margin-inline: auto; }

.nn-checkout__title {
  margin: 0 0 clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: clamp(2rem, 3.5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
}

.nn-checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: start; }
.nn-checkout__main { display: grid; gap: 1rem; }

.nn-checkout__errors {
  padding: .875rem 1rem;
  border: 1px solid #f0c2c2;
  border-radius: var(--radius);
  background: #fdeeee;
  color: #7a2222;
  font-size: .9375rem;
}

.nn-checkout__errors p + p { margin-top: .375rem; }

/* The same shape as the till's, because it is the same message: something you
   typed cannot be saved and here is why. */
.nn-form__errors {
  margin-bottom: 1.25rem;
  padding: .875rem 1rem;
  border: 1px solid #f0c2c2;
  border-radius: var(--radius);
  background: #fdeeee;
  color: #7a2222;
  font-size: .9375rem;
}

.nn-form__errors ul { display: grid; gap: .25rem; list-style: disc; padding-left: 1.125rem; }

/* --- Fields --- */
.nn-field-group {
  margin: 0;
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-field-group__legend {
  padding: 0 .375rem;
  margin-inline-start: -.375rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--nn-ink);
}

.nn-field { display: grid; gap: .375rem; margin-top: .875rem; }
.nn-field-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }

.nn-field__label { font-size: .8125rem; font-weight: 600; color: var(--nn-ink-soft); }

.nn-field__input {
  width: 100%;
  min-height: 2.875rem;
  padding: .625rem .875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nn-white);
  font-size: 1rem;
  color: var(--nn-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.nn-field__input:focus-visible {
  outline: none;
  border-color: var(--nn-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, .25);
}

.nn-field__input--area { min-height: 5rem; resize: vertical; }
.nn-field__hint { margin-top: .625rem; font-size: .78125rem; line-height: 1.5; color: var(--muted); }
.nn-field__error { font-size: .8125rem; font-weight: 600; color: #7a2222; }

.nn-field__warning {
  margin-top: .875rem;
  padding: .75rem .875rem;
  border: 1px solid #edd6ad;
  border-radius: var(--radius);
  background: #fdf4e6;
  font-size: .875rem;
  color: #7a4a12;
}

/* --- Radio choices --- */
.nn-choices { display: grid; gap: .625rem; margin-top: .875rem; }

.nn-choice {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.nn-choice:hover { border-color: var(--nn-gold); }
.nn-choice:has(.nn-choice__input:checked) { border-color: var(--nn-gold); background: var(--nn-cream); }
.nn-choice:has(.nn-choice__input:focus-visible) { box-shadow: 0 0 0 3px rgba(201, 162, 74, .25); }

.nn-choice__input { margin-top: .1875rem; accent-color: var(--gold-dark); flex: none; }
.nn-choice__body { display: grid; gap: .1875rem; flex: 1; min-width: 0; }
.nn-choice__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.nn-choice__name { font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-choice__price { font-size: .9375rem; font-weight: 700; color: var(--nn-ink); white-space: nowrap; }
.nn-choice__price.is-free { color: #1d6b3f; }
.nn-choice__note { font-size: .8125rem; line-height: 1.5; color: var(--nn-ink-soft); }
.nn-choice__eta { font-size: .78125rem; font-weight: 600; color: var(--gold-dark); }

/* --- Checkboxes --- */
.nn-check { display: flex; align-items: flex-start; gap: .625rem; margin-top: .875rem; font-size: .875rem; line-height: 1.5; cursor: pointer; }
.nn-check__input { margin-top: .1875rem; accent-color: var(--gold-dark); flex: none; }
.nn-check a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: .2em; }

/* --- Summary --- */
.nn-checkout__summary {
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-checkout__summary-title { margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 700; }
.nn-checkout__lines { display: grid; gap: .875rem; }
.nn-checkout__line { display: flex; align-items: center; gap: .75rem; }

.nn-checkout__line-media {
  position: relative;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  overflow: visible;
}

.nn-checkout__line-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* The count sits on the thumbnail, which is how a summary shows quantity
   without a column of its own. */
.nn-checkout__line-qty {
  position: absolute;
  top: -.4375rem;
  right: -.4375rem;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 .25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--nn-ink);
  color: var(--nn-white);
  font-size: .6875rem;
  font-weight: 700;
  line-height: 1;
}

.nn-checkout__line-body { flex: 1; min-width: 0; }
.nn-checkout__line-name { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.nn-checkout__line-option { display: block; margin-top: .125rem; font-size: .78125rem; color: var(--muted); }
.nn-checkout__line-total { font-size: .875rem; font-weight: 700; white-space: nowrap; }

.nn-checkout__coupon { margin-top: 1.25rem; }
.nn-checkout__rows { display: grid; gap: .5rem; margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
.nn-checkout__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.nn-checkout__row dt { font-size: .875rem; color: var(--nn-ink-soft); }
.nn-checkout__row dd { margin: 0; font-size: 1rem; font-weight: 700; }
.nn-checkout__row--muted dd { font-size: .8125rem; font-weight: 500; color: var(--muted); text-align: right; }
.nn-checkout__note { margin-top: .875rem; font-size: .78125rem; line-height: 1.55; color: var(--muted); }
.nn-checkout__terms { margin-top: 1.25rem; }
.nn-checkout__submit { margin-top: 1.25rem; }
.nn-checkout__back { display: block; margin-top: .875rem; font-size: .875rem; color: var(--muted); text-align: center; text-decoration: underline; text-underline-offset: .25em; }
.nn-checkout__back:hover { color: var(--gold-dark); }

/* --- Confirmation --- */
.nn-confirm { padding-block: clamp(2.5rem, 4.6vw, 5rem) clamp(3rem, 5.2vw, 6rem); background: var(--nn-cream); }
.nn-confirm__inner { width: min(100% - 2 * var(--nn-gutter), 44rem); margin-inline: auto; text-align: center; }

.nn-confirm__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.nn-confirm__title { margin: .5rem 0 0; font-size: clamp(2rem, 3.5vw, 3.25rem); font-weight: 600; letter-spacing: -.01em; }
.nn-confirm__number { margin-top: .875rem; font-size: 1rem; color: var(--nn-ink-soft); }
.nn-confirm__number strong { color: var(--nn-ink); letter-spacing: .04em; }
.nn-confirm__lede { margin-top: .625rem; font-size: 1rem; color: var(--nn-ink-soft); }

.nn-confirm__next { margin-top: clamp(1.75rem, 2.6vw, 2.25rem); text-align: left; }
.nn-confirm__next-title { margin: 0 0 .75rem; font-size: 1.0625rem; font-weight: 700; }

.nn-confirm__steps { display: grid; gap: .625rem; counter-reset: step; }

.nn-confirm__steps li {
  display: flex;
  gap: .75rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--nn-ink-soft);
}

.nn-confirm__steps li::before {
  counter-increment: step;
  content: counter(step);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--nn-gold);
  color: #000;
  font-size: .75rem;
  font-weight: 700;
}

.nn-confirm__panel {
  margin-top: 1.25rem;
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
  text-align: left;
}

.nn-confirm__panel-title { margin: 0 0 .875rem; font-size: 1rem; font-weight: 700; }
.nn-confirm__lines { display: grid; gap: .5rem; }
.nn-confirm__line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.nn-confirm__line-qty { color: var(--muted); }
.nn-confirm__line-total { font-weight: 600; white-space: nowrap; }
.nn-confirm__rows { display: grid; gap: .5rem; margin: 1rem 0 0; padding-top: .875rem; border-top: 1px solid var(--line); }
.nn-confirm__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.nn-confirm__row dd { margin: 0; font-weight: 600; }
.nn-confirm__row--total { padding-top: .625rem; border-top: 1px solid var(--line); font-size: 1.125rem; }
.nn-confirm__row--total dd { font-weight: 700; }
.nn-confirm__address { display: grid; gap: .1875rem; font-style: normal; font-size: .9375rem; color: var(--nn-ink-soft); }
.nn-confirm__actions { display: grid; gap: .875rem; justify-items: center; margin-top: 1.75rem; }
.nn-confirm__link { font-size: .875rem; color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }

@media (min-width: 40em) {
  .nn-field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62em) {
  .nn-checkout__layout { grid-template-columns: minmax(0, 1fr) 23rem; }
  .nn-checkout__summary { position: sticky; top: 5.25rem; }
}

.nn-cart__checkout { margin-top: 1.25rem; }
.nn-cart__checkout[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* The billing fields, revealed when the delivery address is not the billing
   one. Spaced away from the checkbox above it so the two do not read as one
   control. */
.nn-checkout__billing { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }

.nn-confirm__line-name { flex: 1; min-width: 0; }

/* ==========================================================================
   17. PRICES AND BADGES
   Fifty-five prices in this catalogue carry a compare-at figure. Until these
   rules existed, none of them looked any different from a price that had
   never moved.
   ========================================================================== */
.nn-price { display: inline-flex; align-items: baseline; gap: .4375rem; flex-wrap: wrap; }
.nn-price__now { font-weight: inherit; color: inherit; }
.nn-price__now.is-reduced { color: #9c2b2b; }

.nn-price__was {
  font-size: .8em;
  font-weight: 500;
  color: var(--muted);
  text-decoration-thickness: 1px;
}

.nn-badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
}

.nn-badge--sale { background: #9c2b2b; color: var(--nn-white); }

/* Sits over the picture, top-left, clear of the card's own padding. */
.nn-products__media { position: relative; }

.nn-products__media > .nn-badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

/* On the product page the badge belongs beside the price, not over the photo:
   there is room, and a label floating on a large image reads as a sticker. */
.nn-pdp__price .nn-price { gap: .625rem; }

/* Specification groups on the product page. */
.nn-spec__group {
  margin: 1.5rem 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.nn-spec__group:first-of-type { margin-top: 0; }

/* ==========================================================================
   18. HEADER SEARCH AND SUGGESTIONS
   The bar used to carry two call-to-action buttons that repeated the two
   dropdowns beside them, which left three nav labels wrapping onto a second
   line at 1280px. The buttons are gone and the room went to the search box,
   which is the control people actually came to use.
   ========================================================================== */
.nn-header__nav .nn-header__link { white-space: nowrap; }

/* The bar is a flex row whose items are explicitly ordered; without a place
   of its own the box defaulted to order 0 and sat in front of the logo. */
/* A search box narrow enough to read "Sear" is not a search box. It is the
   only flexible thing in the bar, so without a floor the nav squeezes it to
   about 100px on a 1280 screen. The floor is the width at which the
   placeholder still reads. */
.nn-header__search {
  position: relative;
  order: 3;
  flex: 0 1 22rem;
  min-width: 12rem;
  margin-left: auto;
}

.nn-header__search-form {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 2.5rem;
  padding-inline: .75rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.nn-header__search-form:focus-within {
  border-color: var(--nn-gold);
  background: rgba(255, 255, 255, .1);
}

.nn-header__search-icon {
  flex: none;
  width: 1.0625rem;
  height: 1.0625rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  color: rgba(255, 255, 255, .7);
}

.nn-header__search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--nn-white);
  font-size: .875rem;
}

.nn-header__search-input::placeholder { color: rgba(255, 255, 255, .55); }
.nn-header__search-input:focus { outline: none; }
.nn-header__search-input::-webkit-search-cancel-button { filter: invert(1); opacity: .5; }

/* Present for a keyboard and for scripting-off, never drawn: the magnifier
   and the Enter key are the affordances here. */
.nn-header__search-submit {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.nn-header__action--search-toggle { display: none; }

/* --- The suggestion panel --- */
.nn-suggest { position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 70; display: none; }
.nn-header__search.is-open .nn-suggest { display: block; }

/* Wider than the box it hangs from, and anchored to its right edge so it
   opens inward rather than off the side of the window. Two columns instead of
   one long list, which is what made it need a scrollbar - a shortcut you have
   to scroll has stopped being one. */
.nn-suggest__panel {
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .28);
  color: var(--nn-ink);
}

.nn-suggest__columns { display: grid; gap: .25rem 1rem; }
.nn-suggest__col { min-width: 0; }

.nn-suggest__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid var(--line);
}

.nn-suggest__hint { flex: none; font-size: .6875rem; color: var(--muted); }

/* Health needs as chips: four of them take one line instead of four. */
.nn-suggest__col--aside .nn-suggest__list { display: flex; flex-wrap: wrap; gap: .375rem; }

.nn-suggest__chip {
  display: inline-flex;
  align-items: center;
  padding: .375rem .75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--nn-ink);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.nn-suggest__chip:hover,
.nn-suggest__chip.is-active { border-color: var(--nn-gold); background: var(--nn-cream); }

/* The reading list goes back to a stacked list inside the chip column. */
.nn-suggest__col--aside .nn-suggest__list:has(.nn-suggest__item) { display: grid; gap: .125rem; }

.nn-suggest__stars { margin-left: .375rem; color: var(--gold-dark); letter-spacing: .05em; }

.nn-suggest__heading {
  padding: .5rem .625rem .25rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-suggest__item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .625rem;
  border-radius: var(--radius);
  color: var(--nn-ink);
  transition: background-color var(--t-fast);
}

.nn-suggest__item:hover,
.nn-suggest__item.is-active { background: var(--nn-cream); }

.nn-suggest__media {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--nn-cream);
}

.nn-suggest__media img { width: 100%; height: 100%; object-fit: cover; }
.nn-suggest__body { flex: 1; min-width: 0; }

.nn-suggest__name {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nn-suggest__meta { display: block; margin-top: .125rem; font-size: .75rem; color: var(--muted); }
.nn-suggest__price {
  flex: none;
  display: grid;
  justify-items: end;
  gap: .1875rem;
  font-size: .875rem;
  font-weight: 700;
  white-space: nowrap;
}

.nn-suggest__price .nn-price { flex-direction: column; align-items: flex-end; gap: 0; }
.nn-suggest__price .nn-badge { font-size: .5625rem; padding: .1875rem .375rem; }
.nn-suggest__item--plain { padding-block: .5625rem; }

.nn-suggest__all {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .4375rem .625rem;
  border-radius: var(--radius);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gold-dark);
}

.nn-suggest__all:hover,
.nn-suggest__all.is-active { background: var(--nn-cream); }
.nn-suggest__arrow { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.nn-suggest__empty { padding: 1rem .625rem; font-size: .875rem; color: var(--muted); text-align: center; }

/* The room for that floor comes out of the nav, which is at its widest gap
   here and needs it least. */
@media (max-width: 1439px) {
  .nn-header__inner { gap: 1rem; }
  .nn-header__list { gap: clamp(1rem, 2.6vw, 2rem); }
}

/* Below the desktop bar the box does not fit beside the logo, so it drops
   under the header and the magnifier brings it back. */
@media (max-width: 1279px) {
  .nn-header__action--search-toggle { display: inline-flex; }

  .nn-header__search {
    position: absolute;
    top: calc(100% + .5rem);
    right: clamp(1rem, 2.7vw, 3.25rem);
    left: auto;
    z-index: 65;
    display: none;
    width: min(26rem, calc(100vw - 2rem));
    max-width: none;
  }

  .nn-header__search.is-revealed { display: block; }

  .nn-header__search-form {
    height: 3rem;
    background: var(--nn-black);
    border-color: var(--nn-gold);
    box-shadow: 0 18px 24px rgba(0, 0, 0, .4);
  }
}

/* ==========================================================================
   19. PRODUCT CARD — the stacked layout
   ========================================================================== */
.nn-products__brand {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

/* Two lines, then an ellipsis. Left to run, a long formula name pushed the
   price and the button down and left the cards in a row at different heights. */
.nn-products__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.nn-products__rating { display: flex; align-items: center; gap: .375rem; }
.nn-products__stars { color: var(--gold-dark); font-size: .8125rem; letter-spacing: .08em; }
.nn-products__reviews { font-size: .75rem; color: var(--muted); }

.nn-products__price {
  margin-top: .125rem;
  font-size: clamp(1rem, 1.15vw, 1.25rem);
  font-weight: 700;
}

/* Every card in a row ends with its button on the same line, whatever the
   name above it did. */
.nn-products__card { display: flex; flex-direction: column; height: 100%; }
.nn-products__info { margin-bottom: clamp(.875rem, 1.4vw, 1.25rem); }
.nn-card-buy { margin-top: auto; }

/* ==========================================================================
   20. THE QUIZ
   ========================================================================== */
.nn-quiz { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem); background: var(--nn-cream); }
.nn-quiz__inner { width: min(100% - 2 * var(--nn-gutter), 40rem); margin-inline: auto; }

.nn-quiz__eyebrow {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-dark);
  text-align: center;
}

.nn-quiz__progress { margin-top: 1.25rem; }
.nn-quiz__step { font-size: .8125rem; font-weight: 600; color: var(--muted); text-align: center; }

.nn-quiz__bar {
  height: .375rem;
  margin-top: .5rem;
  border-radius: 999px;
  background: var(--nn-cream-deep);
  overflow: hidden;
}

.nn-quiz__bar-fill { display: block; height: 100%; background: var(--nn-gold); transition: width var(--t); }

.nn-quiz__question {
  margin: clamp(1.5rem, 2.6vw, 2.25rem) 0 0;
  font-size: clamp(1.625rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-align: center;
}

.nn-quiz__help { margin-top: .75rem; font-size: 1rem; color: var(--nn-ink-soft); text-align: center; }
.nn-quiz__options { display: grid; gap: .75rem; margin-top: clamp(1.75rem, 2.6vw, 2.25rem); }

.nn-quiz__option {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
  cursor: pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}

.nn-quiz__option:hover { border-color: var(--nn-gold); transform: translateY(-1px); }
.nn-quiz__option:has(.nn-quiz__input:checked) { border-color: var(--nn-gold); background: #fffdf6; }
.nn-quiz__option:has(.nn-quiz__input:focus-visible) { box-shadow: 0 0 0 3px rgba(201, 162, 74, .3); }
.nn-quiz__input { flex: none; width: 1.125rem; height: 1.125rem; accent-color: var(--gold-dark); }
.nn-quiz__option-body { display: grid; gap: .1875rem; }
.nn-quiz__option-label { font-size: 1rem; font-weight: 600; color: var(--nn-ink); }
.nn-quiz__option-help { font-size: .8125rem; color: var(--muted); }

.nn-quiz__actions { display: grid; justify-items: center; gap: .625rem; margin-top: 1.5rem; }
.nn-quiz__next { min-width: 12rem; }
.nn-quiz__note { font-size: .8125rem; color: var(--muted); }

.nn-quiz__restart-form { margin-top: 1.5rem; text-align: center; }

.nn-quiz__restart {
  font-size: .8125rem;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.nn-quiz__restart:hover { color: var(--gold-dark); }

/* --- Results --- */
.nn-quiz-results { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem); }
.nn-quiz-results__inner { width: min(100% - 2 * var(--nn-gutter), 68rem); margin-inline: auto; }

.nn-quiz-results__title {
  margin: .5rem 0 0;
  font-size: clamp(1.875rem, 3.4vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.01em;
  text-align: center;
}

.nn-quiz-results__lede {
  margin: .875rem auto 0;
  max-width: 36rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--nn-ink-soft);
  text-align: center;
}

.nn-quiz-results__needs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: .75rem;
  margin-top: clamp(1.5rem, 2.6vw, 2.25rem);
}

.nn-quiz-results__need {
  display: grid;
  gap: .25rem;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
  transition: border-color var(--t-fast), transform var(--t-fast);
}

.nn-quiz-results__need:hover { border-color: var(--nn-gold); transform: translateY(-2px); }
.nn-quiz-results__need-name { font-size: 1.0625rem; font-weight: 700; color: var(--nn-ink); }
.nn-quiz-results__need-link { font-size: .8125rem; font-weight: 600; color: var(--gold-dark); }

.nn-quiz-results__subtitle {
  margin: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(1.25rem, 2vw, 1.75rem);
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  font-weight: 600;
  text-align: center;
}

.nn-quiz-results__actions { display: grid; justify-items: center; gap: .875rem; margin-top: clamp(2rem, 3.4vw, 3rem); }
.nn-quiz-results__link { font-size: .875rem; color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }

.nn-quiz-results__disclaimer {
  max-width: 40rem;
  margin: 2rem auto 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .78125rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

/* The quiz is the one nav item that is an invitation rather than a
   destination, so it is the one that is marked. */
.nn-header__link--accent { color: var(--nn-gold-light); }
.nn-header__link--accent:hover { color: var(--nn-white); }

.nn-howto__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }

.nn-howto__link {
  font-size: clamp(.9375rem, 1vw, 1.0625rem);
  font-weight: 600;
  color: var(--nn-white);
  text-decoration: underline;
  text-underline-offset: .3em;
}

.nn-howto__link:hover { color: var(--nn-gold-light); }

.nn-quiz-results__note {
  max-width: 34rem;
  margin: clamp(1.5rem, 2.6vw, 2.25rem) auto 0;
  padding: 1rem 1.25rem;
  border: 1px solid #edd6ad;
  border-radius: var(--radius-lg);
  background: #fdf4e6;
  font-size: .9375rem;
  line-height: 1.6;
  color: #7a4a12;
  text-align: center;
}

.nn-quiz__form { margin: 0; }
.nn-suggest__list { display: grid; gap: .125rem; }

/* ==========================================================================
   21. FOOTER — the sitemap layout
   The design put the newsletter and three thin link columns in two halves,
   which left most of the left half empty and pushed the columns hard right.
   It is a sitemap now: the newsletter takes a column of its own and the links
   take as many as they need.
   ========================================================================== */
.nn-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  width: min(100% - 2 * var(--nn-gutter), 100.25rem);
  margin-inline: auto;
  padding-block: clamp(2.75rem, 5.1vw, 5rem) clamp(2rem, 3.4vw, 3rem);
}

.nn-footer__newsletter { max-width: 26rem; }
.nn-footer__pitch { margin: -.5rem 0 1.125rem; font-size: .875rem; line-height: 1.6; color: rgba(255, 255, 255, .75); }

.nn-footer__sitemap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.5rem);
}

.nn-footer__col-title {
  margin: 0 0 .75rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nn-gold-light);
}

.nn-footer__list { display: grid; gap: .5rem; }

.nn-footer__link {
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, .85);
  white-space: normal;
}

.nn-footer__link:hover { color: var(--nn-gold-light); text-decoration: underline; text-underline-offset: .25em; }

/* --- Small print --- */
.nn-footer__bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding-top: clamp(1.5rem, 2.6vw, 2.25rem);
  border-top: 1px solid var(--nn-footer-line);
  text-align: center;
}

.nn-footer__logo { justify-self: center; min-width: 0; }
.nn-footer__logo img { width: clamp(9rem, 14vw, 12rem); height: auto; }

/* A note, not a form field. The border made it look like something to fill in. */
.nn-footer__fda {
  max-width: 44rem;
  margin: 0 auto;
  padding: 0;
  border: 0;
  font-size: .75rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}

.nn-footer__legal-row { display: grid; gap: .625rem; justify-items: center; }

.nn-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem 1.25rem;
  padding: 0;
  font-size: .8125rem;
}

.nn-footer__copy { font-size: .8125rem; color: rgba(255, 255, 255, .7); }

@media (min-width: 62em) {
  /* The newsletter keeps a column; the sitemap takes the rest. */
  .nn-footer__inner { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .nn-footer__newsletter { max-width: none; }
  .nn-footer__sitemap { padding-left: clamp(1.5rem, 3vw, 3.5rem); border-left: 1px solid var(--nn-footer-line); }
  .nn-footer__bottom { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; text-align: left; }
  .nn-footer__logo { justify-self: start; }
  .nn-footer__fda { margin: 0; text-align: left; }
  .nn-footer__legal-row { justify-items: end; }
  .nn-footer__legal { justify-content: flex-end; }
}

/* ==========================================================================
   22. PRODUCT PAGE — breadcrumb and delivery promise
   ========================================================================== */
.nn-crumbs { padding-block: 1rem .25rem; background: var(--nn-cream); }

.nn-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  width: min(100% - 2 * var(--nn-gutter), var(--nn-container));
  margin-inline: auto;
  font-size: .8125rem;
  color: var(--muted);
}

.nn-crumbs__list li + li::before { content: "/"; margin-right: .375rem; color: var(--line); }
.nn-crumbs__list a:hover { color: var(--gold-dark); text-decoration: underline; text-underline-offset: .2em; }
.nn-crumbs__list [aria-current="page"] { color: var(--nn-ink); font-weight: 600; }

/* The three questions a shopper asks straight after "add to basket": what does
   delivery cost, when does it come, and what if I change my mind. Answered
   from the shipping rates this market actually has. */
.nn-promise {
  display: grid;
  gap: .625rem;
  margin-top: clamp(1.25rem, 2vw, 1.75rem);
  padding-top: clamp(1.25rem, 2vw, 1.75rem);
  border-top: 1px solid var(--line);
}

.nn-promise__item {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: .875rem;
  color: var(--nn-ink-soft);
}

.nn-promise__icon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--gold-dark);
}

.nn-promise__item a { text-decoration: underline; text-underline-offset: .2em; }
.nn-promise__item a:hover { color: var(--gold-dark); }

/* Beside the price rather than over the photograph: there is room here, and a
   label floating on a large image reads as a sticker. */
.nn-pdp__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .75rem; }
.nn-pdp__price .nn-badge { align-self: center; }

/* The panel is wider than the box, opening toward the middle of the page so it
   cannot run off the right edge of the window. */
@media (min-width: 62em) {
  .nn-suggest { left: auto; right: 0; width: min(40rem, calc(100vw - 4rem)); }
  .nn-suggest__columns { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
  .nn-suggest__col--products:only-child { grid-column: 1 / -1; }
}

/* A primary action that cannot be taken must not look pressable. */
.nn-card-buy .nn-btn[aria-disabled="true"] {
  opacity: .5;
  pointer-events: none;
}

/* ==========================================================================
   23. CATALOGUE FILTERS
   A sidebar on a wide screen; a <details> that starts closed on a phone,
   because a screen of checkboxes above the products is not a listing.
   ========================================================================== */
.nn-listing__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 2.4vw, 2.25rem);
  width: min(100% - 2 * var(--nn-gutter), 82rem);
  margin-inline: auto;
}

.nn-listing__results { min-width: 0; }
.nn-listing__results .nn-listing__products { width: 100%; }

/* --- The phone toggle --- */
.nn-listing__panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-listing__panel-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .875rem 1.125rem;
  font-size: .9375rem;
  font-weight: 700;
  color: var(--nn-ink);
  cursor: pointer;
  list-style: none;
}

.nn-listing__panel-toggle::-webkit-details-marker { display: none; }

.nn-listing__panel-toggle::after {
  content: "+";
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--gold-dark);
  line-height: 1;
}

.nn-listing__panel[open] .nn-listing__panel-toggle::after { content: "\2212"; }

.nn-listing__panel-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--nn-gold);
  color: #000;
  font-size: .6875rem;
  font-weight: 700;
}

/* --- The panel itself --- */
.nn-filters { padding: 0 1.125rem 1.125rem; }

/* On a phone the summary above already says "Filter", so the heading inside
   is the same word twice; only the clear link earns its place there. */
.nn-filters__head { display: flex; align-items: baseline; justify-content: flex-end; gap: 1rem; }
.nn-filters__title { display: none; }
.nn-filters__title { font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nn-filters__clear { font-size: .78125rem; font-weight: 600; color: var(--gold-dark); text-decoration: underline; text-underline-offset: .25em; }

.nn-filters__group { margin: 1.25rem 0 0; padding: 0; border: 0; }

.nn-filters__legend {
  padding: 0;
  margin-bottom: .5rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--nn-ink);
}

.nn-filters__options { display: grid; gap: .4375rem; }

.nn-filters__check {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: var(--nn-ink-soft);
  cursor: pointer;
}

.nn-filters__check input { accent-color: var(--gold-dark); flex: none; }
.nn-filters__check:hover { color: var(--nn-ink); }

.nn-filters__price { display: flex; align-items: center; gap: .5rem; }

.nn-filters__input {
  width: 100%;
  min-width: 0;
  height: 2.375rem;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .875rem;
  color: var(--nn-ink);
}

.nn-filters__input:focus-visible { outline: none; border-color: var(--nn-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, .25); }
.nn-filters__dash { flex: none; color: var(--muted); }
.nn-filters__apply { margin-top: 1.25rem; }

/* --- Count, sort and the chips --- */
.nn-listing__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
}

.nn-listing__count { font-size: .875rem; font-weight: 600; color: var(--nn-ink-soft); }
.nn-sort { display: flex; align-items: center; gap: .5rem; }
.nn-sort__label { font-size: .8125rem; color: var(--muted); }

.nn-sort__select {
  /* A select is its own hit area, so it cannot be smaller than a thumb. */
  height: 2.75rem;
  padding: 0 .5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--nn-white);
  font-size: .875rem;
  color: var(--nn-ink);
  cursor: pointer;
}

.nn-active { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }

.nn-active__chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .3125rem .625rem;
  border: 1px solid var(--nn-gold);
  border-radius: 999px;
  background: #fffdf6;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--nn-ink);
  transition: background-color var(--t-fast);
}

.nn-active__chip:hover { background: var(--nn-cream); }
.nn-active__x { width: .75rem; height: .75rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; color: var(--gold-dark); }

@media (min-width: 62em) {
  .nn-listing__layout { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }

  /* On a wide screen it is a sidebar, always open, and the toggle is gone. */
  .nn-listing__panel { position: sticky; top: 5.25rem; }
  .nn-listing__panel-toggle { display: none; }
  .nn-filters { padding-top: 1.125rem; }
  .nn-filters__head { justify-content: space-between; }
  .nn-filters__title { display: block; }

  /* Four cards is the rule for a full-width listing; beside a sidebar there
     is room for three. */
  .nn-listing__results .nn-listing__products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 90em) {
  .nn-listing__results .nn-listing__products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The sort form's own submit, for a browser that is not running the controller
   that would otherwise press it. */
.nn-sort__apply { flex: none; }

/* ==========================================================================
   24. BASKET DISCOUNT CODE
   ========================================================================== */
.nn-coupon { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.nn-coupon__form { display: flex; gap: .5rem; }

.nn-coupon__input {
  flex: 1;
  min-width: 0;
  height: 2.5rem;
  padding: 0 .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .875rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--nn-ink);
}

.nn-coupon__input:focus-visible { outline: none; border-color: var(--nn-gold); box-shadow: 0 0 0 3px rgba(201, 162, 74, .25); }
.nn-coupon__input::placeholder { text-transform: none; letter-spacing: normal; }

.nn-coupon__apply {
  flex: none;
  height: 2.5rem;
  padding: 0 .875rem;
  border: 1px solid var(--nn-ink);
  border-radius: var(--radius);
  background: var(--nn-ink);
  color: var(--nn-white);
  font-size: .8125rem;
  font-weight: 600;
}

.nn-coupon__apply:hover { background: #000; }

.nn-coupon__applied {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid #c2e4d0;
  border-radius: var(--radius);
  background: #e9f6ee;
}

.nn-coupon__tick { color: #1d6b3f; font-weight: 700; }
.nn-coupon__code { flex: 1; font-size: .875rem; font-weight: 700; letter-spacing: .04em; color: #1d6b3f; }
.nn-coupon__remove-form { flex: none; }

.nn-coupon__remove {
  padding: 0;
  font-size: .75rem;
  color: #1d6b3f;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.nn-coupon__warning {
  margin-bottom: .625rem;
  padding: .5rem .75rem;
  border: 1px solid #edd6ad;
  border-radius: var(--radius);
  background: #fdf4e6;
  font-size: .78125rem;
  line-height: 1.5;
  color: #7a4a12;
}

.nn-cart__row--discount dt, .nn-cart__row--discount dd { color: #1d6b3f; }

/* ==========================================================================
   25. ADDED-TO-BASKET CONFIRMATION
   The flash strip said "X added to your basket" at the top of a long listing,
   which is easy to miss and says nothing about what happens next.
   ========================================================================== */
.nn-toast {
  position: fixed;
  right: var(--nn-gutter);
  bottom: var(--nn-gutter);
  z-index: 120;
  width: min(22rem, calc(100vw - 2 * var(--nn-gutter)));
  pointer-events: none;
}

.nn-toast:empty { display: none; }

.nn-toast__panel {
  pointer-events: auto;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
  box-shadow: 0 24px 48px rgba(0, 0, 0, .3);
  animation: nn-toast-in .32s var(--ease);
}

@keyframes nn-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-toast__panel { animation: none; }
}

.nn-toast__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 700;
  color: #1d6b3f;
}

.nn-toast__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #e9f6ee;
  font-size: .75rem;
}

.nn-toast__close {
  margin-left: auto;
  padding: .25rem;
  color: var(--muted);
}

.nn-toast__close svg { width: .875rem; height: .875rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.nn-toast__close:hover { color: var(--nn-ink); }

.nn-toast__line { display: flex; align-items: center; gap: .75rem; margin-top: .875rem; }

.nn-toast__media {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--nn-cream);
}

.nn-toast__media img { width: 100%; height: 100%; object-fit: cover; }
.nn-toast__body { flex: 1; min-width: 0; }
.nn-toast__name { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.nn-toast__option { display: block; margin-top: .0625rem; font-size: .75rem; color: var(--muted); }
.nn-toast__qty { display: block; margin-top: .0625rem; font-size: .75rem; color: var(--muted); }
.nn-toast__price { flex: none; font-size: .875rem; font-weight: 700; }

.nn-toast__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .875rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  color: var(--nn-ink-soft);
}

.nn-toast__subtotal strong { font-size: 1rem; color: var(--nn-ink); }
.nn-toast__actions { display: grid; gap: .5rem; margin-top: .875rem; }

/* ==========================================================================
   26. CUSTOMER ACCOUNTS
   ========================================================================== */
.nn-auth { padding-block: clamp(2.5rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem); background: var(--nn-cream); }

.nn-auth__panel {
  width: min(100% - 2 * var(--nn-gutter), 28rem);
  margin-inline: auto;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-auth__title { margin: 0; font-size: clamp(1.625rem, 2.6vw, 2rem); font-weight: 600; letter-spacing: -.01em; }
.nn-auth__lede { margin-top: .5rem; font-size: .9375rem; color: var(--nn-ink-soft); }
.nn-auth__form { margin-top: 1.25rem; display: grid; gap: .25rem; }
.nn-auth__form .nn-btn { margin-top: 1rem; }
.nn-auth__alt { margin-top: 1.25rem; font-size: .875rem; color: var(--nn-ink-soft); text-align: center; }
.nn-auth__alt a { color: var(--gold-dark); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; }

.nn-auth__staff {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .78125rem;
  color: var(--muted);
  text-align: center;
}

.nn-auth__staff a { text-decoration: underline; text-underline-offset: .25em; }

.nn-account { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(3rem, 6vw, 6rem); }
.nn-account__inner { width: min(100% - 2 * var(--nn-gutter), 58rem); margin-inline: auto; }
.nn-account__inner--narrow { max-width: 42rem; }

.nn-account__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.nn-account__title { margin: 0; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 600; letter-spacing: -.01em; }
.nn-account__signout-form { margin: 0; }
.nn-account__signout { font-size: .875rem; color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }
.nn-account__signout:hover { color: var(--nn-ink); }

.nn-account__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.125rem; }
.nn-account__book { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.125rem; }

.nn-account__card {
  padding: clamp(1.125rem, 1.8vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--nn-white);
}

.nn-account__card + .nn-account__card { margin-top: 1.125rem; }
.nn-account__card-head { display: flex; align-items: center; gap: .625rem; }
.nn-account__card-title { margin: 0 0 .875rem; font-size: 1.0625rem; font-weight: 700; }
.nn-account__card-head .nn-account__card-title { margin-bottom: 0; }

.nn-account__default {
  padding: .1875rem .5rem;
  border: 1px solid #c2e4d0;
  border-radius: 999px;
  background: #e9f6ee;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1d6b3f;
}

.nn-account__orders { display: grid; gap: .5rem; }

.nn-account__order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .125rem .75rem;
  padding: .75rem .875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color var(--t-fast);
}

.nn-account__order:hover { border-color: var(--nn-gold); }
.nn-account__order-number { font-size: .9375rem; font-weight: 700; letter-spacing: .03em; }
/* The column is named, not left to auto-placement. An item with a definite
   row and no column is placed before the auto-placed ones, so the total took
   column one and pushed the order number and its date into column two - every
   row read back to front, price first and the number hard against the right
   edge. */
.nn-account__order-total {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 1rem;
  font-weight: 700;
  text-align: right;
}
.nn-account__order-meta { font-size: .78125rem; color: var(--muted); }

.nn-account__addresses { display: grid; gap: .625rem; }
.nn-account__address { display: grid; gap: .25rem; font-size: .875rem; color: var(--nn-ink-soft); }
.nn-account__address-block { display: grid; gap: .1875rem; font-style: normal; font-size: .9375rem; color: var(--nn-ink-soft); }
.nn-account__card-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.nn-account__remove-form { margin: 0; }
.nn-account__remove { padding: 0; font-size: .8125rem; color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }
.nn-account__remove:hover { color: #7a2222; }
.nn-account__more { font-size: .875rem; font-weight: 600; color: var(--gold-dark); text-decoration: underline; text-underline-offset: .25em; }
.nn-account__empty { margin-bottom: 1rem; font-size: .9375rem; color: var(--muted); }
.nn-account__form { display: grid; gap: .25rem; }
.nn-account__form-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 1.25rem; }
.nn-account__back { margin-top: 1.75rem; font-size: .875rem; }
.nn-account__back a { color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }

/* Saved addresses at the till, above the fields they fill. */
.nn-choices--addresses { margin-bottom: 1.25rem; }
.nn-choices--addresses .nn-choice__head { align-items: center; gap: .5rem; justify-content: flex-start; }

/* The full order list has room to breathe that the dashboard's three-row
   summary does not. */
.nn-account__orders--full { gap: .75rem; }

/* ==========================================================================
   27. INGREDIENTS
   ========================================================================== */
.nn-ingredients { width: min(100% - 2 * var(--nn-gutter), 60rem); margin-inline: auto; }

.nn-ingredients__heading {
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-ingredients__heading + * + .nn-ingredients__heading { margin-top: clamp(2rem, 3.4vw, 3rem); }
.nn-ingredients__chips { display: flex; flex-wrap: wrap; gap: .625rem; }

.nn-ingredients__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--nn-white);
  font-size: .875rem;
  font-weight: 600;
  color: var(--nn-ink);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

.nn-ingredients__chip:hover { border-color: var(--nn-gold); background: var(--nn-cream); }

.nn-ingredients__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .375rem;
  border-radius: 999px;
  background: var(--nn-cream);
  font-size: .6875rem;
  font-weight: 700;
  color: var(--muted);
}

.nn-ingredients__index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: clamp(1.25rem, 2vw, 2rem);
}

.nn-ingredients__initial {
  margin: 0 0 .5rem;
  padding-bottom: .375rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold-dark);
}

.nn-ingredients__group ul { display: grid; gap: .3125rem; }

.nn-ingredients__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .875rem;
  color: var(--nn-ink-soft);
}

.nn-ingredients__link:hover { color: var(--gold-dark); }
.nn-ingredients__link .nn-ingredients__count { background: transparent; }
.nn-facts__link { color: var(--nn-ink-soft); text-decoration: underline; text-underline-offset: .2em; }
.nn-facts__link:hover { color: var(--gold-dark); }

/* ==========================================================================
   28. PRODUCT COMPARISON
   ========================================================================== */
.nn-compare-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  margin-top: .5rem;
  font-size: .75rem;
  color: var(--muted);
  cursor: pointer;
}

.nn-compare-pick input { accent-color: var(--gold-dark); }
.nn-compare-pick:hover { color: var(--nn-ink); }

.nn-compare-pick--pdp { justify-content: flex-start; margin-top: .875rem; font-size: .8125rem; }

.nn-compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  padding: .75rem var(--nn-gutter);
  background: var(--nn-ink);
  color: var(--nn-white);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, .25);
}

.nn-compare-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: min(100% , var(--nn-container));
  margin-inline: auto;
}

.nn-compare-bar__count { font-size: .875rem; }
.nn-compare-bar__count strong { font-size: 1.125rem; }
.nn-compare-bar__actions { display: flex; align-items: center; gap: 1rem; }

.nn-compare-bar__clear {
  font-size: .8125rem;
  color: rgba(255, 255, 255, .75);
  text-decoration: underline;
  text-underline-offset: .25em;
}

.nn-compare-bar__clear:hover { color: var(--nn-white); }

.nn-compare { width: min(100% - 2 * var(--nn-gutter), 82rem); margin-inline: auto; }

.nn-compare__title {
  margin: 0 0 clamp(1.5rem, 2.6vw, 2.25rem);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  text-align: center;
}

/* The table scrolls sideways rather than squeezing four columns into a phone.
   Squeezed, every value wraps to four lines and nothing can be compared. */
.nn-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nn-compare__table { width: 100%; min-width: 34rem; border-collapse: collapse; }
.nn-compare__corner { width: 9rem; }

.nn-compare__product {
  width: auto;
  padding: 1rem .75rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.nn-compare__media { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--nn-cream); }
.nn-compare__media img { width: 100%; height: 100%; object-fit: contain; }
.nn-compare__brand { display: block; margin-top: .625rem; font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }
.nn-compare__name { display: block; margin-top: .1875rem; font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-compare__price { display: block; margin-top: .375rem; font-size: 1rem; font-weight: 700; }

.nn-compare__band th {
  padding: 1rem .75rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
  text-align: left;
}

.nn-compare__label {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--line);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--nn-ink-soft);
  text-align: left;
  vertical-align: top;
}

.nn-compare__value {
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--line);
  font-size: .875rem;
  color: var(--nn-ink);
  vertical-align: top;
}

.nn-compare__value.is-blank { color: var(--muted); }
.nn-compare__row--same .nn-compare__value { color: var(--muted); }
.nn-compare__back { margin-top: 1.75rem; font-size: .875rem; text-align: center; }
.nn-compare__back a { color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }

/* The bar sits over the bottom of the page, so the last row needs room. */
body:has(.nn-compare-bar:not([hidden])) .nn-footer { padding-bottom: 4rem; }

/* ==========================================================================
   29. HEALTH NEEDS
   ========================================================================== */
.nn-pagehead__back { margin-top: 1rem; font-size: .8125rem; }

.nn-pagehead__back a {
  color: inherit;
  opacity: .75;
  text-decoration: underline;
  text-underline-offset: .25em;
}

.nn-pagehead__back a:hover { opacity: 1; }

.nn-goals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: clamp(1rem, 2vw, 1.75rem);
  width: min(100% - 2 * var(--nn-gutter), var(--nn-container));
  margin-inline: auto;
}

.nn-goals__card { display: flex; }

.nn-goals__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--nn-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.nn-goals__link:hover {
  border-color: var(--gold-dark);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
  transform: translateY(-3px);
}

/* Three bottles, overlapping, so a goal reads as a shelf rather than a word. */
.nn-goals__shots {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .5rem;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--nn-cream);
}

.nn-goals__shot {
  display: block;
  width: 5.5rem;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) / 1.5);
  overflow: hidden;
  background: var(--nn-white);
}

.nn-goals__shot img { width: 100%; height: 100%; object-fit: contain; }

.nn-goals__body {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  flex: 1;
  padding: 1.25rem;
}

.nn-goals__name { font-size: 1.125rem; font-weight: 600; letter-spacing: -.005em; }
.nn-goals__text { flex: 1; font-size: .875rem; line-height: 1.55; color: var(--muted); }

.nn-goals__count {
  margin-top: .375rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

@media (max-width: 30rem) {
  .nn-goals__shot { width: 4.25rem; }
}

/* ==========================================================================
   30. PRODUCT VERIFICATION
   ========================================================================== */
.nn-verify { width: min(100% - 2 * var(--nn-gutter), 44rem); margin-inline: auto; }

.nn-verify__form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--nn-cream);
  border-radius: var(--radius);
}

.nn-verify__field { display: grid; gap: .375rem; }

.nn-verify__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nn-ink-soft);
}

.nn-verify__input {
  width: 100%;
  padding: .75rem .875rem;
  font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-size: 1rem;
  letter-spacing: .06em;
  background: var(--nn-white);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) / 1.5);
  color: var(--nn-ink);
}

.nn-verify__input:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 1px; }
.nn-verify__hint { font-size: .75rem; color: var(--muted); }

.nn-verify__panel {
  margin-top: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.nn-verify__panel--idle { color: var(--muted); font-size: .875rem; text-align: center; }

/* The two answers must not look alike at a glance: somebody holding a pack
   they are unsure about reads the colour before they read the words. */
.nn-verify__panel--verified { border-left: 3px solid var(--gold-dark); }
.nn-verify__panel--unknown { border-left: 3px solid var(--nn-ink); background: var(--nn-cream); }

.nn-verify__verdict { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 600; }

.nn-verify__product {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.nn-verify__shot {
  flex: none;
  display: block;
  width: 5rem;
  aspect-ratio: 1;
  border-radius: calc(var(--radius) / 1.5);
  overflow: hidden;
  background: var(--nn-cream);
}

.nn-verify__shot img { width: 100%; height: 100%; object-fit: contain; }
.nn-verify__facts { display: flex; flex-direction: column; gap: .1875rem; }

.nn-verify__brand {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.nn-verify__name { font-size: 1rem; font-weight: 600; color: var(--nn-ink); }
.nn-verify__sku { font-size: .75rem; color: var(--muted); }

.nn-verify__batch {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.nn-verify__batch dt {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-verify__batch dd { margin: .25rem 0 0; font-size: .9375rem; font-weight: 600; }
.nn-verify__note { margin-top: 1.25rem; font-size: .875rem; line-height: 1.6; }
.nn-verify__note--warn { padding: .75rem .875rem; background: var(--nn-cream); border-radius: calc(var(--radius) / 1.5); }
.nn-verify__note--warn a, .nn-verify__next a { color: var(--nn-ink); text-decoration: underline; text-underline-offset: .25em; }
.nn-verify__next { margin-top: 1rem; font-size: .875rem; }

/* Freshness and verification, under the buy panel. */
.nn-freshness {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
}

.nn-freshness__item { display: flex; justify-content: space-between; gap: 1rem; }
.nn-freshness__label { color: var(--muted); }
.nn-freshness__value { font-weight: 600; color: var(--nn-ink); }
.nn-freshness__value--mono { font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace); letter-spacing: .04em; }
.nn-freshness__check a { color: var(--muted); text-decoration: underline; text-underline-offset: .25em; }
.nn-freshness__check a:hover { color: var(--nn-ink); }

/* A product that cannot simply be added to a basket says so here. */
.nn-restriction {
  display: grid;
  gap: .25rem;
  margin: 1rem 0 0;
  padding: .75rem .875rem;
  background: var(--nn-cream);
  border-left: 3px solid var(--gold-dark);
  border-radius: calc(var(--radius) / 1.5);
}

.nn-restriction__title {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dark);
}

.nn-restriction__reason { font-size: .8125rem; line-height: 1.55; color: var(--nn-ink-soft); }
.nn-field__hint--strong { color: var(--nn-ink); font-weight: 600; }

/* Where an order carrying a prescription stands. */
.nn-script {
  display: grid;
  gap: .375rem;
  margin: 1.5rem 0;
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  background: var(--nn-cream);
  border-left: 3px solid var(--gold-dark);
  text-align: left;
}

.nn-script--pending { border-left-color: var(--gold-dark); }
.nn-script--approved { border-left-color: var(--gold-dark); }
.nn-script--rejected { border-left-color: var(--nn-ink); }
.nn-script__title { font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-script__text { font-size: .875rem; line-height: 1.6; color: var(--nn-ink-soft); }
.nn-script__note { font-size: .8125rem; color: var(--muted); }

/* ==========================================================================
   31. ACCOUNT: NAVIGATION, TRACKING, PROFILE
   ========================================================================== */
.nn-account__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin: 0 0 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}

.nn-account__nav-link {
  padding: .4375rem .875rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8125rem;
  color: var(--nn-ink-soft);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.nn-account__nav-link:hover { border-color: var(--gold-dark); color: var(--nn-ink); }

.nn-account__nav-link.is-active {
  background: var(--nn-ink);
  border-color: var(--nn-ink);
  color: var(--nn-white);
}

.nn-account__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.nn-account__note { margin-top: .875rem; font-size: .8125rem; color: var(--muted); }

.nn-field__static { margin: 0; font-size: .9375rem; color: var(--nn-ink); }

.nn-choice--inline { margin: 1rem 0; }

.nn-track { display: grid; gap: 1rem; }

.nn-track__item {
  padding: .875rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-dark);
  border-radius: calc(var(--radius) / 1.5);
}

.nn-track__state { font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-track__carrier { margin-left: .5rem; font-size: .8125rem; font-weight: 400; color: var(--muted); }

.nn-track__rows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: .75rem;
  margin-top: .75rem;
}

.nn-track__rows dt {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.nn-track__rows dd { margin: .1875rem 0 0; font-size: .875rem; }
.nn-track__code { font-family: var(--mono, ui-monospace, Menlo, monospace); letter-spacing: .04em; }

/* ==========================================================================
   32. THE PRINTED INVOICE
   No site chrome: this page exists to become paper or a PDF.
   ========================================================================== */
.nn-print { background: var(--nn-white); color: var(--nn-ink); }

.nn-invoice {
  width: min(100% - 2rem, 48rem);
  margin: 2.5rem auto;
  font-size: .875rem;
  line-height: 1.6;
}

.nn-invoice__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--nn-ink);
}

.nn-invoice__brand { font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; }
.nn-invoice__doc { font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-dark); }
.nn-invoice__meta { display: grid; gap: .25rem; }
.nn-invoice__meta div { display: flex; gap: .75rem; justify-content: flex-end; }
.nn-invoice__meta dt { color: var(--muted); }
.nn-invoice__meta dd { margin: 0; font-weight: 600; }

.nn-invoice__parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.nn-invoice__parties h2 { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nn-invoice__parties address { display: grid; margin-top: .375rem; font-style: normal; }
.nn-invoice__tax-id { margin-top: .375rem; font-size: .8125rem; color: var(--muted); }

.nn-invoice__lines { width: 100%; margin-top: 1rem; border-collapse: collapse; }
.nn-invoice__lines th, .nn-invoice__lines td { padding: .625rem .5rem; text-align: left; }
.nn-invoice__lines thead th { border-bottom: 1px solid var(--nn-ink); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; }
.nn-invoice__lines tbody td { border-bottom: 1px solid var(--line); vertical-align: top; }
.nn-invoice__num { text-align: right; }
.nn-invoice__sku { display: block; font-size: .75rem; color: var(--muted); }
.nn-invoice__lines tfoot th { text-align: right; font-weight: 400; color: var(--muted); }
.nn-invoice__lines tfoot td { border-bottom: 1px solid var(--line); }
.nn-invoice__total th, .nn-invoice__total td { font-size: 1rem; font-weight: 700; color: var(--nn-ink); border-bottom: 0; }

.nn-invoice__foot { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.nn-invoice__origin { font-size: .8125rem; color: var(--muted); }

@media print {
  /* Nothing to click on paper, and margins the printer already provides. */
  .nn-invoice { width: 100%; margin: 0; }
  .nn-invoice__lines tbody tr { break-inside: avoid; }
}

/* An offer the basket earned, and the one it has not. */
.nn-cart__row--offer dt { color: var(--gold-dark); font-weight: 600; }
.nn-cart__row--offer dd { color: var(--gold-dark); font-weight: 600; }

.nn-cart__nudge {
  margin-top: .875rem;
  padding: .625rem .75rem;
  background: var(--nn-cream);
  border-radius: calc(var(--radius) / 1.5);
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--nn-ink-soft);
}

/* Writing a review. */
.nn-review-form {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--nn-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.nn-review-form__title { margin: 0 0 1rem; font-size: 1.125rem; font-weight: 600; }
.nn-review-form__prompt { font-size: .9375rem; color: var(--nn-ink-soft); }
.nn-review-form__prompt a { color: var(--nn-ink); text-decoration: underline; text-underline-offset: .25em; }
.nn-review-form__form { display: grid; gap: 1rem; }
.nn-review-form__rating { border: 0; padding: 0; margin: 0; }

/* Laid out right to left so the CSS sibling selector can light up the stars
   before the one being hovered, which is how a star rating has to behave. */
.nn-review-form__stars { display: inline-flex; flex-direction: row-reverse; gap: .25rem; margin-top: .375rem; }

.nn-review-form__star {
  font-size: 1.75rem;
  line-height: 1;
  color: var(--line);
  cursor: pointer;
  transition: color var(--t-fast);
}

.nn-review-form__star:hover,
.nn-review-form__star:hover ~ .nn-review-form__star,
.nn-review-form__star:has(input:checked),
.nn-review-form__star:has(input:checked) ~ .nn-review-form__star { color: var(--nn-gold); }

/* Visible focus, because the input itself is off-screen for the screen reader. */
.nn-review-form__star:has(input:focus-visible) { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

/* ==========================================================================
   33. CONTACT
   ========================================================================== */
.nn-contact { width: min(100% - 2 * var(--nn-gutter), 44rem); margin-inline: auto; }
.nn-contact__intro { margin-bottom: 1.75rem; font-size: .9375rem; line-height: 1.7; color: var(--nn-ink-soft); }

.nn-contact__form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--nn-cream);
  border-radius: var(--radius);
}

.nn-contact__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.nn-contact__aside { margin-top: 1.25rem; font-size: .875rem; color: var(--muted); text-align: center; }
.nn-contact__aside a { color: var(--nn-ink); text-decoration: underline; text-underline-offset: .25em; }

/* ==========================================================================
   34. SAVED FOR LATER
   ========================================================================== */
.nn-save {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .75rem;
  padding: 0;
  background: none;
  border: 0;
  font-size: .8125rem;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast);
}

.nn-save:hover { color: var(--nn-ink); }
.nn-save--on { color: var(--gold-dark); }

.nn-saved { display: grid; gap: .75rem; width: min(100%, 48rem); }

.nn-saved__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: .875rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.nn-saved__media { display: block; width: 4.5rem; aspect-ratio: 1; border-radius: calc(var(--radius) / 1.5); overflow: hidden; background: var(--nn-cream); }
.nn-saved__media img { width: 100%; height: 100%; object-fit: contain; }
.nn-saved__body { display: grid; gap: .1875rem; min-width: 0; }
.nn-saved__brand { font-size: .625rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }
.nn-saved__name { font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-saved__option { font-size: .8125rem; color: var(--muted); }
.nn-saved__price { font-size: .9375rem; font-weight: 700; }
.nn-saved__was { margin-left: .375rem; font-size: .8125rem; font-weight: 400; color: var(--muted); }
.nn-saved__actions { display: grid; gap: .375rem; justify-items: end; }
.nn-saved__state { font-size: .8125rem; color: var(--muted); }
.nn-saved__remove { padding: 0; background: none; border: 0; font-size: .75rem; color: var(--muted); text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.nn-saved__remove:hover { color: var(--nn-ink); }

@media (max-width: 34rem) {
  .nn-saved__item { grid-template-columns: auto minmax(0, 1fr); }
  .nn-saved__actions { grid-column: 1 / -1; justify-items: start; }
}

/* ==========================================================================
   35. BRANDS AND TAGS
   ========================================================================== */
.nn-brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  width: min(100% - 2 * var(--nn-gutter), var(--nn-container));
  margin-inline: auto;
}

.nn-brands__card { display: flex; }

.nn-brands__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  background: var(--nn-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}

.nn-brands__link:hover {
  border-color: var(--gold-dark);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
  transform: translateY(-3px);
}

.nn-brands__mark {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  min-height: 7rem;
  background: var(--nn-cream);
}

.nn-brands__mark img { max-width: 100%; height: auto; }
.nn-brands__initial { font-size: 2.25rem; font-weight: 700; color: var(--gold-dark); }
.nn-brands__body { display: flex; flex-direction: column; gap: .375rem; flex: 1; padding: 1.125rem; }
.nn-brands__name { font-size: 1.0625rem; font-weight: 600; }
.nn-brands__text { flex: 1; font-size: .875rem; line-height: 1.55; color: var(--muted); }
.nn-brands__count { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dark); }

.nn-pdp__brand a { color: inherit; text-decoration: none; }
.nn-pdp__brand a:hover { text-decoration: underline; text-underline-offset: .25em; }

.nn-pdp__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: 1rem; }

.nn-pdp__tag {
  display: inline-block;
  padding: .25rem .625rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .75rem;
  color: var(--muted);
  transition: border-color var(--t-fast), color var(--t-fast);
}

.nn-pdp__tag:hover { border-color: var(--gold-dark); color: var(--nn-ink); }

/* Money that has gone back. */
.nn-refunds { display: grid; gap: .625rem; }
.nn-refunds__item { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.nn-refunds__amount { font-size: 1rem; font-weight: 700; color: var(--nn-ink); }
.nn-refunds__reason { font-size: .8125rem; color: var(--muted); }
.nn-refunds__date { font-size: .8125rem; color: var(--muted); white-space: nowrap; }

/* ==========================================================================
   36. ORDER PROGRESS
   Steps rather than a percentage: "60% complete" is a number nobody can act
   on, where "packed, not yet dispatched" says what to expect next.
   ========================================================================== */
.nn-progress { display: grid; gap: 0; margin-top: .5rem; }

.nn-progress__step {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: start;
  gap: .75rem;
  padding-bottom: 1.25rem;
}

.nn-progress__step:last-child { padding-bottom: 0; }

/* The line joining one marker to the next, drawn behind them. */
.nn-progress__step::before {
  content: "";
  position: absolute;
  top: 1.1rem;
  bottom: -.1rem;
  left: .8125rem;
  width: 2px;
  background: var(--line);
}

.nn-progress__step:last-child::before { display: none; }
.nn-progress__step.is-done::before { background: var(--gold-dark); }

.nn-progress__marker {
  position: relative;
  z-index: 1;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .25rem;
  margin-left: .3125rem;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--nn-white);
}

.nn-progress__step.is-done .nn-progress__marker { border-color: var(--gold-dark); background: var(--gold-dark); }

/* The step it is on now, marked with a ring so it reads as "here" rather than
   as one more finished step. */
.nn-progress__step.is-current .nn-progress__marker {
  border-color: var(--gold-dark);
  background: var(--nn-white);
  box-shadow: 0 0 0 4px rgba(191, 155, 72, .22);
}

.nn-progress__body { display: grid; gap: .125rem; }
.nn-progress__label { font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-progress__step.is-to-come .nn-progress__label { font-weight: 400; color: var(--muted); }
.nn-progress__at { font-size: .8125rem; color: var(--muted); }
.nn-progress__stopped { font-size: .9375rem; color: var(--nn-ink-soft); }

/* What one serving costs, under the price it belongs to. */
.nn-price__per {
  display: block;
  margin-top: .125rem;
  font-size: .75rem;
  font-weight: 400;
  color: var(--muted);
}

/* ==========================================================================
   37. BOTTOM NAVIGATION (phones)
   ========================================================================== */
.nn-bottomnav { display: none; }

@media (max-width: 47.99em) {
  .nn-bottomnav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background: var(--nn-white);
    border-top: 1px solid var(--line);
    /* Clear of the home indicator on a notched phone. */
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .06);
  }

  .nn-bottomnav__list { display: grid; grid-template-columns: repeat(5, 1fr); }
  .nn-bottomnav__item { display: flex; }
  .nn-bottomnav__item > * { flex: 1; }

  .nn-bottomnav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1875rem;
    min-height: 3.25rem;
    padding: .375rem .25rem;
    color: var(--muted);
    text-decoration: none;
  }

  .nn-bottomnav__icon-wrap { position: relative; display: inline-flex; }
  .nn-bottomnav__icon { width: 1.375rem; height: 1.375rem; }
  .nn-bottomnav__label { font-size: .625rem; letter-spacing: .02em; }

  /* The current tab is marked by weight and colour, not colour alone. */
  .nn-bottomnav__link.is-current { color: var(--nn-ink); }
  .nn-bottomnav__link.is-current .nn-bottomnav__label { font-weight: 700; }

  .nn-bottomnav__badge {
    position: absolute;
    top: -.3125rem;
    right: -.4375rem;
    min-width: .9375rem;
    height: .9375rem;
    padding: 0 .1875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--nn-gold);
    color: var(--nn-black);
    font-size: .5625rem;
    font-weight: 700;
  }

  /* Room for the bar, so it never sits over the last thing on the page. */
  .storefront { padding-bottom: calc(3.75rem + env(safe-area-inset-bottom, 0px)); }

  /* The compare bar stacks above it rather than under it. */
  .nn-compare-bar { bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ==========================================================================
   38. STICKY BUY BAR (phones)
   A product page is mostly reading, and by the time somebody has decided the
   button is a long way back up.
   ========================================================================== */
.nn-stickybuy { display: none; }

@media (max-width: 47.99em) {
  .nn-stickybuy {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    /* Above the bottom bar, never over it. */
    bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    padding: .625rem var(--nn-gutter);
    background: var(--nn-white);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 22px rgba(0, 0, 0, .10);
  }

  .nn-stickybuy[hidden] { display: none; }

  .nn-stickybuy__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }

  .nn-stickybuy__facts { display: grid; gap: .0625rem; min-width: 0; }

  .nn-stickybuy__name {
    font-size: .8125rem;
    color: var(--nn-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nn-stickybuy__price { font-size: 1rem; font-weight: 700; color: var(--nn-ink); }
  .nn-stickybuy__per { margin-left: .25rem; font-size: .6875rem; font-weight: 400; color: var(--muted); }
  .nn-stickybuy__cta { flex: none; min-height: 2.75rem; }
}

/* ==========================================================================
   39. SKELETONS
   A shape that resembles what is coming, not a spinner. An empty box reads as
   "nothing found"; a shape reads as "on its way".
   ========================================================================== */
.nn-skeleton {
  display: block;
  border-radius: calc(var(--radius) / 2);
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, .06) 25%,
    rgba(0, 0, 0, .10) 37%,
    rgba(0, 0, 0, .06) 63%
  );
  background-size: 400% 100%;
  animation: nn-skeleton-sweep 1.4s ease infinite;
}

@keyframes nn-skeleton-sweep {
  from { background-position: 100% 50%; }
  to { background-position: 0 50%; }
}

/* Somebody who has asked for less motion gets the shape without the sweep. */
@media (prefers-reduced-motion: reduce) {
  .nn-skeleton { animation: none; }
}

.nn-skeleton--thumb { flex: none; width: 2.75rem; height: 2.75rem; border-radius: calc(var(--radius) / 1.5); }
.nn-skeleton--line { height: .6875rem; }
.nn-skeleton--short { width: 45%; }

.nn-suggest__skeleton { display: grid; gap: .75rem; padding: .875rem 1rem; }
.nn-skeleton__row { display: flex; align-items: center; gap: .75rem; }
.nn-skeleton__lines { display: grid; gap: .375rem; flex: 1; min-width: 0; }

/* ==========================================================================
   40. SUPPLEMENT FACTS, HOW TO USE, TRANSPARENCY
   ========================================================================== */
.nn-facts-label {
  border: 2px solid var(--nn-ink);
  border-radius: calc(var(--radius) / 1.5);
  padding: .875rem 1rem;
}

.nn-facts-label__head { display: grid; gap: .25rem; padding-bottom: .625rem; border-bottom: 1px solid var(--nn-ink); }
.nn-facts-label__head div { display: flex; justify-content: space-between; gap: 1rem; }
.nn-facts-label__head dt { font-size: .875rem; color: var(--nn-ink-soft); }
.nn-facts-label__head dd { margin: 0; font-size: .875rem; font-weight: 700; }

.nn-facts-label__table { width: 100%; margin-top: .625rem; border-collapse: collapse; font-size: .875rem; }
.nn-facts-label__table th,
.nn-facts-label__table td { padding: .4375rem .25rem; text-align: left; }
.nn-facts-label__table thead th { border-bottom: 1px solid var(--nn-ink); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.nn-facts-label__table tbody th { font-weight: 400; }
.nn-facts-label__table tbody tr + tr th,
.nn-facts-label__table tbody tr + tr td { border-top: 1px solid var(--line); }
.nn-facts-label__num { text-align: right; white-space: nowrap; }
.nn-facts-label__other { margin-top: .75rem; padding-top: .625rem; border-top: 1px solid var(--nn-ink); font-size: .8125rem; line-height: 1.55; color: var(--nn-ink-soft); }
.nn-facts-label__other span { font-weight: 700; color: var(--nn-ink); }

.nn-use { display: grid; gap: .875rem; }
.nn-use__row { display: grid; gap: .1875rem; }
.nn-use__row dt { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.nn-use__row dd { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--nn-ink-soft); }

/* A warning is marked by a rule as well as by its heading, so it is not the
   colour alone doing the work. */
.nn-use__row--warn {
  padding-left: .875rem;
  border-left: 3px solid var(--gold-dark);
}

.nn-transparency__lede { margin-bottom: 1rem; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.nn-transparency { display: grid; gap: .5rem; }

.nn-transparency__row {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .625rem;
  font-size: .875rem;
}

.nn-transparency__mark { font-weight: 700; text-align: center; }
.nn-transparency__row.is-have .nn-transparency__mark { color: var(--gold-dark); }
.nn-transparency__row.is-missing .nn-transparency__mark { color: var(--muted); }
.nn-transparency__label { color: var(--nn-ink); }
.nn-transparency__state { font-size: .8125rem; color: var(--muted); white-space: nowrap; }
.nn-transparency__row.is-missing .nn-transparency__label { color: var(--nn-ink-soft); }

/* ==========================================================================
   41. RECENTLY VIEWED
   ========================================================================== */
.nn-recent { padding: clamp(2rem, 4vw, 3rem) 0 0; }
.nn-recent__inner { width: min(100% - 2 * var(--nn-gutter), var(--nn-container)); margin-inline: auto; }
.nn-recent__title { margin: 0 0 1.25rem; font-size: clamp(1.125rem, 2vw, 1.375rem); font-weight: 600; }

/* A row that scrolls sideways on purpose, rather than a grid that reflows the
   page every time somebody opens one more product. */
.nn-recent__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(8.5rem, 1fr);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: .5rem;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 62em) {
  .nn-recent__list { grid-auto-columns: minmax(9.5rem, 1fr); }
}

.nn-recent__item { scroll-snap-align: start; }
.nn-recent__link { display: grid; gap: .375rem; color: inherit; }
.nn-recent__media { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--nn-cream); }
.nn-recent__media img { width: 100%; height: 100%; object-fit: contain; }
.nn-recent__name { font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; }
.nn-recent__price { font-size: .875rem; font-weight: 700; }

/* What a certification mark actually means. */
.nn-certs__lede { margin-bottom: 1rem; font-size: .875rem; line-height: 1.6; color: var(--muted); }
.nn-certs { display: grid; gap: 1rem; }
.nn-certs__row { display: grid; gap: .25rem; }
.nn-certs__row dt { font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-certs__row dd { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--nn-ink-soft); }

/* ==========================================================================
   42. QUESTIONS AND ANSWERS
   ========================================================================== */
.nn-qa { padding: clamp(2.5rem, 5vw, 4rem) 0 0; }
.nn-qa__inner { width: min(100% - 2 * var(--nn-gutter), 52rem); margin-inline: auto; }
.nn-qa__title { margin: 0 0 1.5rem; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 600; }
.nn-qa__list { display: grid; gap: 1.5rem; margin-bottom: 2.25rem; }
.nn-qa__item { padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.nn-qa__item:last-child { border-bottom: 0; padding-bottom: 0; }

.nn-qa__question,
.nn-qa__answer { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; }

.nn-qa__question { font-size: .9375rem; font-weight: 600; color: var(--nn-ink); }
.nn-qa__answer { margin-top: .75rem; font-size: .9375rem; line-height: 1.65; color: var(--nn-ink-soft); }

.nn-qa__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--nn-cream);
  font-size: .75rem;
  font-weight: 700;
  color: var(--nn-ink);
}

.nn-qa__mark--a { background: var(--nn-gold); }
.nn-qa__by { display: block; margin-top: .375rem; font-size: .75rem; color: var(--muted); }
.nn-qa__empty { margin-bottom: 2rem; font-size: .9375rem; color: var(--muted); }

.nn-qa__ask {
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--nn-cream);
  border-radius: var(--radius);
}

.nn-qa__ask-title { margin: 0 0 1rem; font-size: 1.0625rem; font-weight: 600; }
.nn-qa__form { display: grid; gap: 1rem; }